html和css实现导航栏样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lovefengruoqing/article/details/79611100

前言

一直以来，都不是很重视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样式实现的深层次原理，才能写出更优美的代码。