<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
background:#ccc;
}
#nav {
list-style-type: none; <!--如果没有这句代码，ul就会出现默认样式。-->
height: 40px;
padding: 0;
margin: 0;
}
#nav li {
float: left;
position: relative !important; <!--如果没有这句代码，li菜单位置就会出现在最左边。-->
padding: 0;
line-height: 40px;
}
#nav li a {
display: block ; <!--如果没有这句代码，菜单会挤在一起。--> ;
width:120px;
color: #fff;
text-decoration: none;
background: #5a8078;
}
#nav li a:hover {
color: #a3f1d7;
}
#nav li ul {
opacity: 0; <!--默认二级菜单不显示，即ul透明，不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时，二级菜单不透明，即ul不通透，从而显示。-->
}
#nav li ul li {
float: none ;
height: 0;
line-height: 0;
}
#nav li:hover ul li {
height: 30px;
line-height: 30px;
}
</style>
<body>
<ul id="nav">
<li><a target="_blank" href="http://kutoku.com">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">桌面</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">主题</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">PNG</a></li>
</ul>
</li>
<li><a target="_blank" href="http://kutoku.com">Contact</a></li>
</ul>
</body>
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
