请问我想制作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;
}