如何实现下拉菜单的对其
<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>
小手乱抖1回答
-
慕无忌7110536
.menu ul li a { text-decoration: none; display: block; padding: 0px 10px; color: #000; overflow: hidden; text-overflow: ellipsis; } .menu ul li ul { position: absolute; /* left: 0px; */ /* top: 40px; */ display: none; left: 0; right: 0; }
随时随地看视频慕课网APP
相关分类
CSS3