求大神用HTML5和CSS做出这个导航条，求源代码，急求大神帮忙
3个回答
展开全部
看看合不合你用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {margin: 0;overflow: hidden;}
i,em,strong{font-style: normal;}
.bar{border-radius: 10px;width: 450px;box-sizing: ;}
.sndli em{display: block;float: right;height: 30px;border-right: 1px dashed #666;margin: 5px 0 0 0;}
a{text-decoration: none;height: 40px;width: 150px;line-height: 40px;color: #000000;display: block;background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8))}
ul,li{margin: 0;padding: 0;}
.outli>li{list-style: none;float: left;box-sizing: border-box;text-align: center;position: relative;}
.inli li{list-style: none;box-sizing: border-box;text-align: center;background:#DCDCDC;}
ul.inli{display: none;}
.inli0>li{float: left;width: 33%;}
.inli0>li:hover{background: #AAA;}
ul.outli>li.sndli:hover>ul{display: block;}
</style>
<body>
<div class="bar">
<ul class="outli">
<li class="sndli">
<a href="javascript:void(0)">1<em></em></a>
<ul class="inli">
<li>
<ul class="inli0">
<li>1.1</li>
<li>1.12</li>
<li>1.13</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>1.21</li>
<li>1.22</li>
<li>1.23</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>1.31</li>
<li>1.32</li>
<li>1.33</li>
</ul>
</li>
</ul>
</li>
<li class="sndli">
<a href="javascript:void(0)">2<em></em></a>
<ul class="inli">
<li>
<ul class="inli0">
<li>2.1</li>
<li>2.12</li>
<li>2.13</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>2.21</li>
<li>2.22</li>
<li>2.23</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>2.31</li>
<li>2.32</li>
<li>2.33</li>
</ul>
</li>
</ul>
</li>
<li class="sndli">
<a href="javascript:void(0)">3</a>
<ul class="inli">
<li>
<ul class="inli0">
<li>3.1</li>
<li>3.12</li>
<li>3.13</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>3.21</li>
<li>3.22</li>
<li>3.23</li>
</ul>
</li>
<li>
<ul class="inli0">
<li>3.31</li>
<li>3.32</li>
<li>3.33</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
ul li浮动就可以实现了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以保存这个，然后修改就可以了，审查元素
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
