推 leochen0818: 個人建議擅用class類別名稱，看到#menu ul ul這種選 10/25 16:21
→ leochen0818: 擇器頗.... 10/25 16:21
→ leochen0818: 或者是請參考w3school的CSS選擇器 10/25 16:29
推 CrazyAngel: ul li a:hover > ul 改成 ul li:hover > ul 10/26 20:57
請問我想製作CSS的選單，找到網路上的範例只有一個階層，
有參考教學將HTML修改為三層，但是CSS的部分有加入最後兩段，
滑鼠移過去仍然沒有反應，請問是還需要加什麼東西嗎？
還是有哪邊需要修改的，麻煩各位指點，謝謝！
HTML:
<div id="menu">
<ul>
<li><a href="#" class="active">111</a></li>
<li><a href="#">222</a>
<ul>
<li><a href="#">222-1</a></li>
<li><a href="#">222-2</a></li>
<li><a href="#">222-3</a>
<ul>
<li><a href="#">222-3-1</a></li>
</ul>
</li>
</ul>
</li>
<ul>
CSS:
#menu{
width: 1050px;
height: 66px;
background: url(menu.png);
}
#menu ul{
padding-left: 0px;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 840px;
}
#menu ul li{
display: inline;
}
#menu ul li a{
font: 16px "微軟正黑體", Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: normal;
text-decoration: none;
text-align: center;
display: block;
float: left;
width: 120px;
height: 61px;
line-height: 61px;
}
#menu ul li:only-child{
background: none;
}
#menu ul li a:hover, #menu ul li .active{
background: url(active.png) center;
}
#menu ul li a:hover > ul {
display: block;
}
#menu ul ul {
position: absolute;
top: 100%;
list-style: none;
display: none;
}
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 203.64.102.23
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1414184835.A.1C2.html