CSS自适应导航菜单的实例代码

以下是一个简单实例，可以通过学习了解响应工菜单的制作。

html

css

 .nav {
     position: relative;
     margin: 20px 0;
 }

     .nav ul {
  margin: 0;
  padding: 0;
     }

  .nav ul li {
      margin: 0 5px 10px 0;
      padding: 0;
      list-style: none;
      float: left;
  }

     .nav a {
  padding: 3px 12px;
  text-decoration: none;
  color: #999;
  line-height: 100%;
     }

  .nav a:hover {
      color: #000;
  }

     .nav .current a {
  background: #999;
  color: #fff;
  border-radius: 5px;
     }
     
     .nav.right ul {
  text-align: right;
     }

     
     .nav.center ul {
  text-align: center;
     }

页面小于600显示成一列

 @media (max-width: 600px) {
     .nav {
  position: relative;
  min-height: 30px;
     }

  .nav ul {
      width: 180px;
      padding: 5px 0;
      position: absolute;
      top: 0;
      left: 0;
      border: solid 1px #aaa;
      background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
      border-radius: 5px;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
  }

  .nav li {
      display: none; 
      margin: 0;
  }

  .nav .current {
      display: block; 
  }

  .nav a {
      display: block;
      padding: 5px 5px 5px 32px;
      text-align: left;
  }

  .nav .current a {
      background: none;
      color: #666;
  }

  
  .nav ul:hover {
      background-image: none;
  }

      .nav ul:hover li {
   display: block;
   margin: 0 0 5px;
      }

      .nav ul:hover .current {
   background: url(images/icon-check.png) no-repeat 10px 7px;
      }

  
  .nav.right ul {
      left: auto;
      right: 0;
  }

  
  .nav.center ul {
      left: 50%;
      margin-left: -90px;
  }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。