怎么用css样式设计导航菜单样式？

怎么用css样式设计导航菜单样式？下面本篇文章给大家通过实例介绍一下使用CSS处理导航菜单样式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

使用HTML设计网页

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
  <div class="header">
  <div class="menu">
  <ul class="first">
  <li class="first">
  <a href="#" class="current">首页</a>
  </li>
  <li class="first">
  <a href="#">产品中心</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">企业版</a></li>
  <li class="second"><a href="#">工作流</a></li>
  <li class="second"><a href="#">移动应用</a></li>
  <li class="second"><a href="#">云服务</a></li>
  </ul>
  </div>
  </li>
  <li class="first">
  <a href="#">案例中心</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">人工智能</a></li>
  <li class="second"><a href="#">互联网</a></li>
  <li class="second"><a href="#">移动支付</a></li>
  <li class="second"><a href="#">金融证券</a></li>
  <li class="second"><a href="#">医疗保险</a></li>
  </ul>
  </div> 
  </li>
  <li class="first">
  <a href="#">服务支持</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">服务流程</a></li>
  <li class="second"><a href="#">服务内容</a></li>
  <li class="second"><a href="#">服务宗旨</a></li>
  </ul>
  </div>
  </li>
  <li class="first">
  <a href="#">关于我们</a>
  <div>
  <ul class="second">
  <li class="second"><a href="#">公司介绍</a></li>
  <li class="second"><a href="#">公司荣誉</a></li>
  <li class="second"><a href="#">新闻中心</a></li>
  <li class="second"><a href="#">招纳贤士</a></li>
  <li class="second"><a href="#">联系我们</a></li>
  </ul>
  </div>
  </li>
  </ul>
  </div>
  </div>
  <div class="slide-container">
  <div class="slide">
  <img src="img/20180907001.jpg" height="100%" width="100%"/>
  <div>
  </div>        
</body>
</html>

使用浏览器浏览该网页

没有进行CSS样式处理的效果：

给菜单设置样式

一级菜单的CSS样式代码如下：

  li.first{
    display:inline-block;
    width:19.5%;
    text-align:center;
    height:80px;
    line-height:80px;
    border:1px solid red;
  }

二级菜单层使用绝对定位，默认隐藏不显示。CSS代码如下：

  li div{
    display:none;
    background:url(img/menubg.png) repeat;
    height: 56px;
    line-height: 52px;
    left: 0;
    position: absolute;
    top: 90px;
    width: 100%;
    text-align: center;
  }

当鼠标移至一级菜单上方时，菜单背景色变为橙色，字体颜色变为白色，并且显示对应的二级菜单层。CSS代码如下：

  li.first:hover{
    background-color:#e95a1a;
  }

  li.first:hover > a{
    color:#fff;
  }

  li.first:hover div{
    display:block;
  }

二级菜单（子菜单）的CSS样式代码如下：

  li.second{
    display:inline-block;
    text-align:center;
    margin-right:2px;
    border:1px solid red;
  }

CSS完整代码如下：

<style>
  .menu{
    height:80px;
    margin-bottom:3px;
  }

  a{
    text-decoration:none;
    font-size:20px;
    color:black;
  }

  a.current{
    color:#fff;
  }

  ul.first{
    list-style-type:none;
    margin-top:0;
    padding-left:0;
    height:80px;
  }

  ul.second{
    list-style-type:none;
    margin-top:0;
    padding-left:0; 
  }

  li.first{
    display:inline-block;
    width:19.5%;
    text-align:center;
    height:80px;
    line-height:80px;
    border:1px solid red;
  }

  li.first:nth-child(1){
    background-color:#e95a1a;
  }
  
  li.first:hover div{
    display:block;
  }

  li.first:hover > a{
    color:#fff;
  }

  li.first:hover{
    background-color:#e95a1a;
  }

  li.second{
    display:inline-block;
    text-align:center;
    margin-right:2px;
    border:1px solid red;
  }

  li.second a{
    padding:0 55px;
  }

  li.second a:hover{
    color:#e95a1a;
  }

  li div{
    display:none;
    background:url(img/menubg.png) repeat;
    height: 56px;
    line-height: 52px;
    left: 0;
    position: absolute;
    top: 90px;
    width: 100%;
    text-align: center;
  }

</style>

再次浏览该页面

引入CSS样式处理代码之后的效果：