使用CSS的下拉菜单

问题描述：

我是网络编程的新手！我一直在一个下拉菜单，这是我的了：使用CSS的下拉菜单

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; 
}

我的问题是，在徘徊网络子块，HTML和CSS UL不显示。我究竟做错了什么？

'#nav #sub李：悬停＃SUB2 {显示：块}' ' #nav li：hover #sub＃sub2 {display：block}' 我猜你的规则没有正确应用... – MMachinegun

答

请从下面的jsfiddle链接http://jsfiddle.net/d9UDT/

部分更新的HTML的更新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; 
}

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

一部分）看来你的标记是有点不对

<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，你可以将它们添加到类，以便同一个类，你可以在其他下拉列表使用，以及

希望这有助于！

答

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

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

在侧<li>

Here is demo for it

使用CSS的下拉菜单

相关推荐