导航栏下拉练习

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yundao</title> <style> *{margin:0px;padding: 0px;} li { list-style:&

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>yundao</title>
<style>
*{margin:0px;padding: 0px;}
li {
list-style: none;
}
a{
text-decoration: none;
}
.header{
width: 1002px;height: 100px;
background-color: #fafafa;
margin:0 auto;
}
.logo{
float: left;
}
.inner{
float: right;
}
.nav{
width: auto;
clear: both;
}
/*.nav::after{
content:"";
        display:block;
        clear:both;
}*/
.nav>li {  /*导航栏li设置*/
float: left;
text-align: center;
margin-top: 20px;
margin-right:10px;
display: inline-table;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 75px;
height: 50px;
line-height: 50px;
position: relative;/*相对定位*/
}
.nav li a{
height: 20px;
color: #333;
/*display:inline-table;*/
}
.nav_ul{ /*下拉栏*/
display: none; /*隐藏下拉栏盒子*/
border: 1px #ccc;
height: 120px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/*padding-left: 10px;*/
position: absolute;/*绝对定位*/
}
.nav_ul li a{
display:block;
margin-top: 10px;
height: 22px;
line-height: 22px;
text-align: center;
width: 75px;
}
.nav_ul li{
/*float: none;*/
}
.nav li:hover > ul{
/* margin-top: -40px;*/
display: block;/*展开下拉栏盒子*/
}
.nav_ul li a:hover{
background:linear-gradient(to bottom,red,green);
}
</style>
</head>
<body>
<div>
<div>  <!-- logo左浮动 -->
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<div>  <!-- 导航栏右浮动 -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商城</a>
<ul>
<li><a href="http://tmall.com">天 猫</a></li>
<li><a href="http://jd.com">京 东</a></li>
<li><a href="#">&nbsp;&nbsp;亚马逊</a></li>
</ul>
</li>
<li><a href="#">门店</a>
<ul>
<li><a href="http://tmall.com">青秀区</a></li>
<li><a href="http://jd.com">兴宁区</a></li>
<li><a href="#">江南区</a></li>
</ul>
</li>
<li><a href="#">平台</a></li>
<li><a href="#">媒体</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</body>
</html>

<p> 利用display的特性来隐藏和展出div盒子，以达到下拉栏的效果</p>

Correcting teacher：灭绝师太Correction time：2018-11-22 17:29:07
Teacher's summary：布局有时候就是巧妙的运用标签属性的特性哦！

导航栏下拉练习

Popular Entries