Question

dreamweaver里如何做出鼠标悬停出现展开菜单的效果?

如题,有HTML代码最好,请高手指点

Answer 1

<style type="text/css">
<!--
li {
display: block;
padding: 0;
margin: 1px 0 0;
list-style: none;
width:150px;
text-align:center;
background-color:#FFCC33;
}
li a:link,li a:visited{
display:block;
color:#000000;
padding:2px 5px;
height:1%;
}
li a:hover{
font-weight:bold;
position:relative;
background-color:#666666;
}
li ul{
position:absolute;
visibility:hidden;
left:100px;
top:0px;
}
li li {
background-color:#FF6600;
}
li li ul{
position:absolute;
visibility:hidden;
}
li li li {
background-color:#3399FF;
}
li:hover ul{
visibility:visible;
}
li:hover ul ul{
visibility:hidden;
}
li a:hover ul{
visibility:visible;
left:100px;
}
li a:hover ul ul{
visibility:hidden;
}
li:hover{
background-color:#666666;
position:relative;
}
li li:hover ul{
visibility:visible;
}
li li a:hover ul{
visibility:visible;
left:100px;
}
-->
</style>

<ul>
<li><a href="">menu item</a></li>
<li><a href="">menu item</a></li>
<li><a href="">menu item
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">menu item</a></li>
<li><a href="">menu item</a></li>
</ul>