完全CSS下拉菜單，只用CSS，純CSS構(gòu)筑！_Div+CSS教程
      
編輯Tag賺U幣
      


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


      


						看看CSS代碼，要注重認(rèn)真看，好好研究哦！
      示例代碼 [www.wf0088.com]
      <style type="text/css">
      .menu {
      font-family: verdana, sans-serif; 
      width:750px; 
      position:relative; 
      font-size:0.85em;
      padding-bottom:250px;
      }
      .menu ul {
      padding:0; 
      margin:0;
      list-style-type: none;
      }
      .menu ul li {
      float:left;
      position:relative;
      }
      .menu ul li a, .menu ul li a:visited {
      display:block; 
      text-decoration:none; 
      color:#000; 
      width:139px; 
      height:3em; 
      color:#000; 
      border:1px solid #fff; 
      border-width:1px 1px 0 0; 
      background:#dfc184; 
      padding-left:10px; 
      line-height:3em;
      }
      * html .menu ul li a, .menu ul li a:visited {
      width:149px;
      w\idth:139px;
      }
      .menu ul li ul {
      display: none;
      }
      table {
      margin:-1px; 
      border-collapse:collapse;
      font-size:1em;
      }

      /* specific to non IE browsers */
      .menu ul li:hover a {
      color:#fff; 
      background:#bd8d5e;
      }
      .menu ul li:hover ul {
      display:block; 
      position:absolute; 
      top:3em;
      margin-top:1px;
      left:0; 
      width:150px;
      }
      .menu ul li:hover ul li ul {
      display: none;
      }
      .menu ul li:hover ul li a {
      display:block; 
      background:#faeec7; 
      color:#000; 
      height:auto; 
      line-height:1.2em; 
      padding:5px 10px; 
      width:129px
      }
      .menu ul li:hover ul li a.drop {
      background:#c9c9a7;
      }
      .menu ul li:hover ul li a:hover {
      background:#c9c9a7; 
      color:#000;
      }
      .menu ul li:hover ul li:hover ul {
      display:block; 
      position:absolute; 
      left:150px; 
      top:0;
      width:150px;
      }
      .menu ul li:hover ul li:hover ul.left {
      left:-150px;
      }
      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
      .menu ul li a:hover {
      color:#fff; 
      background:#bd8d5e;
      }
      .menu ul li a:hover ul {
      display:block; 
      position:absolute; 
      top:3em; 
      left:0;
      background:#fff;
      margin-top:0;
      marg\in-top:1px;
      }
      .menu ul li a:hover ul li a {
      display:block; 
      background:#dbe4ab; 
      color:#000; 
      height:auto; 
      line-height:1.5em; 
      padding:5px 10px; 
      width:150px;
      w\idth:129px;
      }
      .menu ul li a:hover ul li a.drop {
      background:#c9c9a7;
      }
      .menu ul li a:hover ul li a ul {
      visibility:hidden; 
      position:absolute; 
      height:0; 
      width:0;
      }
      .menu ul li a:hover ul li a:hover {
      background:#c9c9a7; color:#000;
      }
      .menu ul li a:hover ul li a:hover ul {
      visibility:visible; 
      position:absolute; 
      top:0; 
      color:#000;
      left:150px;
      }
      .menu ul li a:hover ul li a:hover ul.left {
      left:-150px;
      }

      </style>
      <![endif]-->


      下面再看看XHTML代碼，同樣要認(rèn)真理解。
      示例代碼 [www.wf0088.com]
      <div class="menu">
      <ul>
      <li><a class="drop" href="http://www.wf0088.com/">DEMOS
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
          <ul>
          <li><a href="http://www.wf0088.com/" title="The zero dollar ads page">zero dollars advertising page</a></li>
          <li><a href="http://www.wf0088.com/" title="Wrapping text around images">wrapping text around images</a></li>
          <li><a href="http://www.wf0088.com/" title="Styling forms">styled form</a></li>
          <li><a href="http://www.wf0088.com/" title="Removing active/focus borders">active focus</a></li>
          <li><a class="drop" href="http://www.wf0088.com/" title="Hover/click with no active/focus borders">hover/click with no borders
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
              <ul>
                  <li><a href="http://www.wf0088.com/" title="Styling forms">styled form</a></li>
                  <li><a href="http://www.wf0088.com/" title="Removing active/focus borders">removing active/focus borders</a></li>
                  <li><a href="http://www.wf0088.com/" title="Hover/click with no active/focus borders">hover/click</a></li>
              </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
          </li>
          <li class="upone"><a href="http://www.wf0088.com/" title="Multi-position drop shadow">shadow boxing</a></li>
          <li><a href="http://www.wf0088.com/" title="Image Map for detailed information">image map for detailed information</a></li>
          <li><a href="http://www.wf0088.com/" title="fun with background images">fun with background images</a></li>
          <li><a href="http://www.wf0088.com/" title="fade-out scrolling">fade scrolling</a></li>
          <li><a href="http://www.wf0088.com/" title="em size images compared">em image sizes compared</a></li>
          </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
      </li>
      <li><a href="http://www.wf0088.com/">BOXES
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
          <ul>
          <li><a href="http://www.wf0088.com/" title="a coded list of spies">a coded list of spies</a></li>
          <li><a href="http://www.wf0088.com/" title="a horizontal vertical menu">vertical menu</a></li>
          <li><a href="http://www.wf0088.com/" title="an enlarging unordered list">enlarging unordered list</a></li>
          <li><a href="http://www.wf0088.com/" title="an unordered list with link images">link images</a></li>
          <li><a href="http://www.wf0088.com/" title="non-rectangular links">non-rectangular</a></li>
          <li><a href="http://www.wf0088.com/" title="jigsaw links">jigsaw links</a></li>
          <li><a href="http://www.wf0088.com/" title="circular links">circular links</a></li>
          </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
      </li>
      <li><a href="http://www.wf0088.com/">MOZILLA
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
          <ul>
          <li><a href="http://www.wf0088.com/" title="A drop down menu">drop down menu</a></li>
          <li><a href="http://www.wf0088.com/" title="A cascading menu">cascading menu</a></li>
          <li><a href="http://www.wf0088.com/" title="Using content:">content:</a></li>
          <li><a href="http://www.wf0088.com/" title=":hover applied to a div">mozzie box</a></li>
          <li><a href="http://www.wf0088.com/" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
          <li><a href="http://www.wf0088.com/" title="Snooker cue">a snooker cue using border art</a></li>
          <li><a href="http://www.wf0088.com/" title="Target Practise">target practise</a></li>
          <li><a href="http://www.wf0088.com/" title="Two tone headings">two tone headings</a></li>
          <li><a href="http://www.wf0088.com/" title="Shadow text">shadow text</a></li>
          </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
      </li>
      <li><a href="http://www.wf0088.com/">EXPLORER
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
          <ul>
          <li><a href="http://www.wf0088.com/" title="Example one">the first example for Internet Explorer</a></li>
          <li><a href="http://www.wf0088.com/" title="Weft fonts">weft fonts</a></li>
          <li><a href="http://www.wf0088.com/" title="Vertical align">vertically aligning text</a></li>
          </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
      </li>
      <li><a href="http://www.wf0088.com/">OPACITY
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
          <ul>
          <li><a href="http://www.wf0088.com/" title="colour wheel">a colour wheel using opaque colours</a></li>
          <li><a href="http://www.wf0088.com/" title="a menu using opacity">a menu using opacity</a></li>
          <li><a href="http://www.wf0088.com/" title="partial opacity">partial opacity</a></li>
          <li><a href="http://www.wf0088.com/" title="partial opacity II">partial opacity II</a></li>
          <li><a class="drop" href="http://www.wf0088.com/" title="Hover/click with no active/focus borders">HOVER/CLICK
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table><tr><td>
              <ul class="left">
                  <li><a href="http://www.wf0088.com/" title="Styling forms">styled form</a></li>
                  <li><a href="http://www.wf0088.com/" title="Removing active/focus borders">removing active/focus borders</a></li>
                  <li><a href="http://www.wf0088.com/" title="Hover/click with no active/focus borders">hover/click</a></li>
              </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->

          </li>
          </ul>
      </td></tr></table>
      <!--[if lte IE 6]>
      </a>
      <![endif]-->
      </li>
      </ul>
      </div>


      查看最后完成的效果！純CSS構(gòu)筑的下拉導(dǎo)航菜單！

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]
      




      

      



      


      來源：無憂整理//所屬分類：Div+CSS教程/更新時間：2006-12-26


      

      



      


      



      相關(guān)Div+CSS教程：