<style>
*{margin:0; padding:0;}
.menu{ width:600px; height:40px; margin:0 auto; background:#CCC;}
.menu ul{ list-style:none;}
.menu ul li{ float:left; line-height:40px; height:40px; text-align:center; position:relative;}
.menu ul li a{ text-decoration:none; display:block; padding:0px 10px; color:#000;}
.menu ul li a:hover{ color:#FFF; background:#999;}
.menu ul li ul li{ float:none; background:#F00; margin-top:1px; text-align:center;}
.menu ul li ul{ position:absolute; left:0px; top:40px; display:none;}
.menu ul li ul li a:hover{ background:#00C;}
.menu ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">产品展示</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
慕无忌7110536
相关分类