二级菜单的实现

导航栏布局借助于

• 标签
  菜单的显示与隐藏借助于：hover伪类
  html代码如下
   
  
   

  
   
  • 首页
  
   
  • 课程大厅
             
    
             
    • javascript
    
             
    • jquery
    
             
    
     
  
   
  • 学习中心
       
    
             
    • 视频学习
    
             
    • 案例学习
    
             
    • 交流平台
    
             
    
           
  
   
  • 经典案例
  
   
  • 关于我们
  
   

  
   
  
   页面布局十分简单 重点是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事件
  
• 学习中心
  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();
          })
      })