菜单实现

1.水平导航菜单

<ul>
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>
</ul>

li{
  float: left;
  width: 120px;
  height: 30px;
  margin-right: 1px;
  background: blue;
  line-height: 30px;
  text-align: center;
}
a{
  color: white;
  width: 100%;
  height: 100%;
  display: block;
}
li:hover{
  background: pink;
}

2.二级水平导航菜单

<ul id="tab">
  <li class="item1">item1
    <ul>
      <li>item01</li>
      <li>item02</li>
      <li>item03</li>
      <li>item04</li>
    </ul>
  </li>
  <li class="item1">item2
    <ul>
      <li>item01</li>
      <li>item02</li>
      <li>item03</li>
      <li>item04</li>
    </ul>
  </li>
  <li class="item1">item3
    <ul>
      <li>item01</li>
      <li>item02</li>
      <li>item03</li>
      <li>item04</li>
    </ul>
  </li>
  <li class="item1">item4
    <ul>
      <li>item01</li>
      <li>item02</li>
      <li>item03</li>
      <li>item04</li>
    </ul>
  </li>
</ul>

#tab>li{
  float: left;
  border:1px solid #ccc;
  cursor: pointer;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-right: 3px;
}
li.item1 ul{
  border: 1px solid #ccc;
  border-top: 0;
  display: none;
}

var oUl = document.getElementById('tab');
var aLi = oUl.querySelectorAll('.item1');
var aUl = document.querySelectorAll('.item1 ul');
for(var i=0;i<aLi.length;i++){
  aLi[i].index = i;
  aLi[i].onmouseover = function(){
    aUl[this.index].style.display = 'block';
  };
  aLi[i].onmouseout = function(){
    aUl[this.index].style.display = 'none';
  };
}

3.折叠菜单

<div id="container">
  <h3>JS</h3>
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
  </ul>

  <h3>CSS</h3>
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
  </ul>
</div>

h3{
  border: 1px solid #ccc;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
ul{
  display: none;
}

var aH3 = document.getElementsByTagName('h3');
var aUl = document.getElementsByTagName('ul');

for(var i=0;i<aH3.length;i++){
  aH3[i].index = i;
  aH3[i].onclick = function(){
    aUl[this.index].style.display = aUl[this.index].style.display=='none' || aUl[this.index].style.display == ''?'block':'none';
  };
}