作者h7568413 (★热心助人☆ )
看板Web_Design
标题[问题] CSS下落式阶层选单
时间Sat Oct 25 05:07:13 2014
请问我想制作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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1414184835.A.1C2.html
1F：推 leochen0818: 个人建议擅用class类别名称，看到#menu ul ul这种选 10/25 16:21
2F：→ leochen0818: 择器颇.... 10/25 16:21
3F：→ leochen0818: 或者是请参考w3school的CSS选择器 10/25 16:29
4F：推 CrazyAngel: ul li a:hover > ul 改成 ul li:hover > ul 10/26 20:57