導航欄佈局藉助於<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();
        })
    })