<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
TA贡献1条经验 获得超0个赞
.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;
}
- 1 回答
- 0 关注
- 1296 浏览
添加回答
举报
0/150
提交
取消