首先,先说一下这里的下拉菜单布局的思路,主要是用css的hover和display语句来实现下拉菜单的显示。即先使用display把下拉框隐藏起来,然后再在hover触发的时候,再使用display语句把下拉框显示出来。具体代码如下:
<!DOCTYPE html> <html> <head> <title>导航栏常用布局</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration:none;padding:auto 5px;} i{border: solid black;border-width: 0 1px 1px 0;display: inline-block;padding: 3px;margin:0 5px 5px 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);} body{width: 100%;height:23px;} nav{width: 1280px;height:23px; margin: auto ;background-color: yellow;} ul{list-style:none;} hr{width: 2px;line-height: 10px;color: pink;margin:2px auto;padding:3px 0px ;display: inline;text-align: center;} .left{width: 40%;line-height:22px;background-color: pink;float: left;} .left .inlines{display: inline;margin:0;float: left;display: inline-block;} .right{width: 58%;line-height:22px;float: right;text-align: right;} .right .inlines{display: inline;margin:0;display: inline-block;} .inlines a:hover{color:#ff5000;} .inlines ul{border:1px solid #ff5000;width:100px;display: none;border-top: none;} /*.list-select a{border:1px solid #ff5000;width: 100%;}*/ .inlines:hover ul{color: red;width: 100px;display:block;position: absolute;} .inlines ul li:hover{} .inlines ul li{color: yellow;} .clear{clear: both;} </style> <body> <nav> <ul class="left"> <li class="inlines"><a href="#">中国大陆 <i></i> <ul> <li><a href="#">中国香港</a></li> <li><a href="#">中国澳门</a></li> <li><a href="#">中国台湾</a></li> </ul> </a></li> <li class="inlines"><a href="#">亲,请登录</a> </li> <li class="inlines"><a href="#">免费注册</a> </li> <li class="inlines"><a href="#">手机逛淘宝</a></li> </ul> <ul class="right"> <li class="inlines"><a href="#">我的淘宝<i></i> <ul> <li><a href="#">已买到的宝贝</a></li> <li><a href="#">我的足迹</a></li> </ul> </a></li> <li class="inlines"><a href="#">购物车<i></i> <ul> <li><span>您的购物车里没有任何宝贝!</span><a href="#">查看我的购物车</a></li> </ul> </a></li> <li class="inlines"><a href="#">收藏夹<i></i> <ul> <li><a href="#">收藏的宝贝</a></li> <li><a href="#">收藏的店铺</a></li> </ul> </a></li> <li class="inlines"><a href="#">商品分类</a></li> <li class="inlines"> <hr> </li> <li class="inlines"><a href="#">卖家中心<i></i> <ul> <li><a href="#">免费开店</a></li> <li><a href="#">已售出的宝贝</a></li> <li><a href="#">出售中的宝贝</a></li> </ul> </a></li> <li class="inlines"><a href="#">联系客服<i></i> <ul> <li><a href="#">消费者客服</a></li> <li><a href="#">卖家客服</a></li> <li><a href="#">中国台湾</a></li> </ul> </a></li> <li class="inlines"><a href="#">网站导航<i></i> <ul> <li><a href="#">主题市场</a></li> <li><a href="#">特色市场</a></li> <li><a href="#">阿里APP</a></li> </ul> </a></li> </ul> </nav> <div class="clear"></div> </body> </html>
以上就是用css语句实现下拉菜单布局的内容。
注:这里的下拉菜单是一个纯静态--无数据交互的下拉框,有数据交互的下拉框一般均使用js实现。