請問我想製作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;
}