二级菜单的实现

导航栏布局借助于<ul> <li> 标签
菜单的显示与隐藏借助于：hover伪类
html代码如下
  <div id="nav">
  <ul>
  <li><a href="#">首页</a></li>
  <li class="navmenu"><a href="#">课程大厅</a>
          <ul>
          <li><a href="#">javascript</a></li>
          <li><a href="#">jquery</a></li>
          </ul>
  </li>
  <li class="navmenu"><a href="#">学习中心</a>
   <ul>
          <li><a href="#">视频学习</a></li>
          <li><a href="#">案例学习</a></li>
          <li><a href="#">交流平台</a></li>
          </ul>
        </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  </ul>
 </div>
 页面布局十分简单 重点是css样式的编写
css代码如下
 #nav { background-color: #eee;    
        width: 600px;
        height:40px;   一定要规定高度 这是为后面垂直居中做好铺垫
        margin: 0 auto;   使整块元素水平居中
      }
ul {
         list-style: none;
       }
ul li{ 
           float: left;
           line-height: 40px;  使元素垂直居中
           text-align: center; 
           /*padding: 0 10px;*/ 
           position: relative;   **目的是让二级菜单以此元素为参考位置 
         }
a { 
        text-decoration: none; 
        color: #000;
        display: block;  让元素以块级元素的方式进行排列
        padding: 0 10px; 使得选中后背景颜色能够覆盖整个元素
        height: 40px;
      }
a:hover { 
        color: #fff;
        background-color: #000;
      }
ul li ul li {
        float: none;
        background-color: #eee; 
        margin-top: 2px; 
      }
ul li ul { 
        position: absolute;  让二级菜单进行绝对定位 根据一级菜单的relative 使二级菜单根据一级菜单的位置进行绝对定位
        left: 0px; 
        top: 40px; 
        display: none;
        }
ul li ul li a  {
        width: 80px;
        }
ul li ul li a:hover {
        background-color:#06f;
        }
ul li:hover ul { 
        display: block; 
        }




但是考虑到浏览器兼容性问题 ：hover在低版本的IE中不支持 所以要用JavaScript进行效果的编写
实现思想
当鼠标经过一级菜单时触发事件 将二级菜单显示出来
为需要的一级菜单绑定onmouseover，与onmouseout事件
<li onmousemove="showsubmenu(this)" onmouseout="hidemenu(this)" class="navmenu"><a href="#">学习中心</a>
js代码






 function showsubmenu(li) {
           var submenu=li.getElementsByTagName("ul")[0];
           submenu.style.display="block";
    }
    function hidemenu(li) {
           var submenu=li.getElementsByTagName("ul")[0];
           submenu.style.display="none";
    }


当然也可以借助jQuery进行实现 轻松简单


$(function() {
    $(".navmenu").mouseover(function(){
    $(this).children("ul").show();
    })
        $(".navmenu").mouseout(function() {
        $(this).children("ul").hide();
        })
    })