Question

我正在尝试使用带有悬停效果的HTML / CSS创建一个下拉菜单.Below是我的HTML代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
    <style>
        body {
            background-color:#181818;
            margin: 0px;
        }

     ul li {
        display: inline-block;
        font-size: 140%;
        color: orange;
        width: 150px;
        background-color: #505050;
        height: 50px;
        border-radius: 150px;
        position: relative;
        }

        p {
            margin-top: 10px;
            text-align: center;
            margin-bottom: 20px;
        }
        ul li:hover {
            color: #505050;
            background-color: orange;
        }
        /*ul li ul {
            visibility: hidden; 
        }*/

     #id2 {
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    #id1:hover #id2 {
        display: block; /* display the dropdown */
    }


    </style>
<body>

        <ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

</body>
</html>

我不确定我在css代码中做错了什么。任何人都可以帮我解决代码问题以及如何正确实现悬停下拉菜单。？

谢谢，巴维克

Answer 1

下拉菜单标记错误

代替

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p id="id1">Projects</p></li>
            <ul id="id2">
                <li><p>Project 1</p></li>
                <li><p>Project 2</p></li>
                <li><p>Project 3</p></li>
            </ul>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

到

<ul id="topMenu">
            <li><p>Home</p></li>
            <li><p>Projects</p>
               <ul>
                  <li><p>Project 1</p></li>
                  <li><p>Project 2</p></li>
                  <li><p>Project 3</p></li>
              </ul>
            </li>
            <li><p>About Us</p></li>
            <li><p>contact us</p></li>
        </ul>

示例：

body { background-color:#181818; margin: 0px; } ul li { display: inline-block; font-size: 140%; color: orange; width: 150px; background-color: #505050; height: 50px; border-radius: 150px; position: relative; } p { margin-top: 10px; text-align: center; margin-bottom: 20px; } ul li:hover { color: #505050; background-color: orange; } ul li ul{ display: none; padding-left: 0; } ul li:hover ul{ display: block; position: absolute; top: 100%; left: 0; }

<ul id="topMenu"> <li> Home </li> <li> Projects <ul id="id2"> <li> Project 1 </li> <li> Project 2 </li> <li> Project 3 </li> </ul> </li> <li> About Us </li> <li> contact us </li> </ul>

Answer 2

看看这个： http://jsfiddle.net/412cosa7/

HTML：

#id1不是#id2的祖先，因此，首先，您可以从#id2移除并将其添加到<li>，然后将#id2's元素放入#id1's。

事实上，您的来源中的不是必需的。

CSS：

使用父选择器＆＃34; >＆＃34; 。例如：#id1:hover > #id2

使用HTML / CSS创建悬停下拉菜单时遇到问题

2 个答案: