使用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不顯示。我究竟做錯了什麼？

來源

2014-03-24 user3456334

'#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，你可以將它們添加到類，以便同一個類，你可以在其他下拉列表使用，以及

希望這有助於！

來源

2014-03-25 11:45:43

您有不正確的HTML結構，你需要添加

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

在側<li>

Here is demo for it

來源

2014-03-25 11:54:23 Tushar

使用CSS的下拉菜單

回答

相關問題