CSS自适应导航菜单实例代码的详细分析

 <nav class="nav">
    <ul>
      <li class="current"><a href="#">Portfolio</a></li>
      <li><a href="#">Illustration</a></li>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Print Media</a></li>
      <li><a href="#">Graphic Design</a></li>
    </ul>
  </nav>

 .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;
      }
      /* right nav */
      .nav.right ul {
        text-align: right;
      }

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

    @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; /* hide all <li> items */
          margin: 0;
        }

        .nav .current {
          display: block; /* show only current <li> item */
        }

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

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

        /* on nav hover */
        .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;
          }

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

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