符合WEB標準的下拉導航菜單例子_Web標準教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      以下為引用的內容：
      <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>css菜單演示</title>
      
            
            

      <style type="text/css">
      <!--
      
            
      *{margin:0;padding:0;border:0;}
      body {
          font-family: arial, 宋體, serif;
              font-size:12px;
      }
      
            

      #nav {
           line-height: 24px;  list-style-type: none; background:#666;
      }
      
            
      #nav a {
          display: block; width: 80px; text-align:center;
      }
      
            
      #nav a:link  {
          color:#666; text-decoration:none;
      }
      #nav a:visited  {
          color:#666;text-decoration:none;
      }
      #nav a:hover  {
          color:#FFF;text-decoration:none;font-weight:bold;
      }
      
            
      #nav li {
          float: left; width: 80px; background:#CCC;
      }
      #nav li a:hover{
          background:#999;
      }
      #nav li ul {
          line-height: 27px;  list-style-type: none;text-align:left;
          left: -999em; width: 180px; position: absolute;
      }
      #nav li ul li{
          float: left; width: 180px;
          background: #F6F6F6;
      }
      
            

      #nav li ul a{
          display: block; width: 156px;text-align:left;padding-left:24px;
      }
      
            
      #nav li ul a:link  {
          color:#666; text-decoration:none;
      }
      #nav li ul a:visited  {
          color:#666;text-decoration:none;
      }
      #nav li ul a:hover  {
          color:#F3F3F3;text-decoration:none;font-weight:normal;
          background:#C00;
      }
      
            
      #nav li:hover ul {
          left: auto;
      }
      #nav li.sfhover ul {
          left: auto;
      }
      #content {
          clear: left;
      }
      
            

      -->
      </style>
      
            
      <script type=text/javascript><!--//--><![CDATA[//><!--
      function menuFix() {
          var sfEls = document.getElementById("nav").getElementsByTagName("li");
          for (var i=0; i<sfEls.length; i++) {
              sfEls[i].onmouseover=function() {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
              }
              sfEls[i].onMouseDown=function() {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
              }
              sfEls[i].onMouseUp=function() {
              this.className+=(this.className.length>0? " ": "") + "sfhover";
              }
              sfEls[i].onmouseout=function() {
              this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
      
            
      "");
              }
          }
      }
      window.onload=menuFix;
      
            
      //--><!]]></script>
      
            
      </head>
      <body>
      
            

      <ul id="nav">
      <li><a href="#">產品介紹</a>
          <ul>
          <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>
          <li><a href="#">產品一</a></li>
          </ul>
      </li>
      <li><a href="#">服務介紹</a>
          <ul>
          <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>
          <li><a href="#">服務二</a></li>
          </ul>
      </li>
      <li><a href="#">成功案例</a>
          <ul>
          <li><a href="#">案例三</a></li>
          <li><a href="#">案例</a></li>
          <li><a href="#">案例三案例三</a></li>
          <li><a href="#">案例三案例三案例三</a></li>
          </ul>
      </li>
      <li><a href="#">關于我們</a>
          <ul>
          <li><a href="#">我們四</a></li>
          <li><a href="#">我們四</a></li>
          <li><a href="#">我們四</a></li>
          <li><a href="#">我們四111</a></li>
          </ul>
      </li>
      
            
      <li><a href="#">在線演示</a>
          <ul>
          <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>
          <li><a href="#">演示演示</a></li>
          <li><a href="#">演示演示演示</a></li>
          <li><a href="#">演示演示演示演示演示</a></li>
          </ul>
      </li>
      <li><a href="#">聯系我們</a>
          <ul>
          <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>
          <li><a href="#">聯系聯系聯系</a></li>
          <li><a href="#">聯系聯系聯系</a></li>
          </ul>
      </li>
      
            
      </ul>
      
            
      </body>
      </html>
      


      

      



      


      來源：模板無憂//所屬分類：Web標準教程/更新時間：2008-04-23


      

      



      


      



      相關Web標準教程：