SOURCE

<div class="nav_1">
  <ul id="nav_box1">
    <li>
      <a href="#">
        菜单一
      </a>
    </li>
    <li>
      <a href="#">
        菜单二
      </a>
    </li>
    <li>
      <a href="#">
        菜单三
      </a>
    </li>
    <li>
      <a href="#">
        菜单四
      </a>
    </li>
    <li>
      <a href="#">
        菜单五
      </a>
    </li>
  </ul>
</div>
<div class="mat_20">
  <ul id="nav_box2">
    <li>
      <a href="#">
        菜单一
      </a>
    </li>
    <li>
      <a href="#">
        菜单二
      </a>
    </li>
    <li>
      <a href="#">
        菜单三
      </a>
    </li>
    <li>
      <a href="#">
        菜单四
      </a>
    </li>
    <li>
      <a href="#">
        菜单五
      </a>
    </li>
  </ul>
</div>

li {
  text-decoration: none;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
}

.nav_1 {
  width: 100%;
  margin: 0 auto;
}


/*nav_box1*/

#nav_box1 {
  height: 32px;
  line-height: 32px;
  background: #49c8f2;
}

#nav_box1 a {
  display: block;
  width: 80px;
  text-align: center;
}

#nav_box1 a:link {
  color: #f8f8f8;
}

#nav_box1 a:visited {
  color: #f8f8f8;
}

#nav_box1 a:hover {
  color: #fff;
  font-weight: bold;
  background-color: #009bdb;
}

#nav_box1 li {
  float: left;
  width: 80px;
}


/*nav_box2*/

#nav_box2 {
  height: 36px;
  line-height: 32px;
  background: #ff9f19;
}

#nav_box2 a {
  display: block;
  width: 80px;
  text-align: center;
  border-bottom: 2px solid #ff9f19;
}

#nav_box2 a:link {
  color: #f8f8f8;
}

#nav_box2 a:visited {
  color: #f8f8f8;
}

#nav_box2 a:hover {
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

#nav_box2 li {
  float: left;
  width: 80px;
}