Question

我是网络编程的新手！我一直在制作一个下拉菜单，这就是我所拥有的：

HTML代码

<!DOCTYPE html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Drop Down Menu</h1>
<hr>
<div>
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a>
      <ul id="sub">
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Design</a></li>
         <li><a href="#">Web</a></li>
          <ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>
      </ul>
    </li>
    <li><a href="#">Popular</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
 </div>
</body>
</html>`

CSS代码

#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left;
    width:100%;
    position:relative;
    z-index:5;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}
#nav #sub{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav #sub li{
    padding-top:1px;
    float:none;
}
#nav #sub a{
    white-space:nowrap; 
}
#nav li:hover #sub{ 
    left:0; 
}

#nav li:hover #sub #sub2 {
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    display: none;
}

#nav #sub li:hover #sub2{
    display:block;
}

#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover #sub a{ 
    text-decoration:none;
}
#nav li:hover #sub li a:hover{ 
    background:#333;
}

我的问题是，当悬停在Web子块上时，HTML和CSS UL不会显示。我做错了什么？

Answer 1

请在下面找到jsfiddle链接http://jsfiddle.net/d9UDT/

更新HTML的一部分

<li><a href="#">Web</a>
            <ul id="sub2" class="submenu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
         </li>

更新CSS的一部分

#nav ul.submenu{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}


#nav li:hover > ul.submenu{ 
    left:0; 
}

1）您的标记似乎有点不对

<li><a href="#">Web</a></li>
          <ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>

这应该是这个

<li><a href="#">Web</a>
            <ul id="sub2" class="submenu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
         </li>

2）不是向id添加样式，而是可以将它们添加到类中，以便您可以在其他下拉列表中使用相同的类

希望这有帮助！

Answer 2

您需要添加不正确的HTML结构

<ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>

在<li>边

Here is demo for it

使用CSS的下拉菜单

2 个答案: