html和css实现导航栏样式

前言

一直以来，都不是很重视html和css，最近研究了下html和css实现下拉导航栏的方式，发现写出来很乱，于是好好的研究了一下，终于能够以比较简洁的方式写出来了。

预览效果

代码部分：

html部分

<div id="item">
<ul class="">
<li>
一级列表

<ul class="second">
<li>二级列表</li>
<li>
二级列表

<ul class="third">
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
</ul>
</li>
<li>二级列表</li>
<li>二级列表</li>
</ul>
</li>
<li>
一级列表

<ul class="second">
<li>二级列表</li>
<li>
二级列表

<ul class="third">
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
</ul>
</li>
<li>二级列表</li>
<li>二级列表</li>
</ul>
</li>
<li>
一级列表

<ul class="second">
<li>二级列表</li>
<li>
二级列表

<ul class="third">
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
<li>三级列表</li>
</ul>
</li>
<li>二级列表</li>
<li>二级列表</li>
</ul>
</li>
</ul>
</div>

css部分

/* 消除默认样式 */
*{
list-style-type: none;
padding:0;
margin:0;
}
/* 父容器加上text-align，使子元素居中显示，比较美观 */
#item {
text-align: center;
margin-top: 20px;
}
/* 对第一层ul进行控制 */
#item > ul {
display: inline-block; /* 将display属性变为行内块级元素，使得其能够居中显示，否则默认会充满整个屏幕 */
width: auto;
}

/* 将子列表隐藏，并加上absolute，方便其子li进行相对定位 */
#item > ul ul {
position: absolute;
display: none;
}

/* 设置第一层列表横排显示 */
#item > ul > li {
float: left;
margin-right:1px;
}

/* 对li样式进行通用设置，使得更美观 */
ul li {
width: 115px;
background: #2196F3;
color:#fff;
position: relative;
width: 115px;
line-height: 35px;
border-radius: 5px;
box-shadow: 2px 2px 3px #80 7e7ec2;
cursor: pointer;
margin-top: 1px;
}

/* 对第三层子列表位置进行控制，使得在父列表右边显示 */
#item>ul>li>ul>li>ul{
left:116px;
top:-1px;
}

/* 设置hover显示子列表 */
#item ul li:hover>ul{
display: block;
}

总结

css要入门很容易，但是要写好，写得美观，就不是那么容易了。很多时候，只有理解了每个元素的详细属性，以及css样式实现的深层次原理，才能写出更优美的代码。