《CSS不規則彈出式菜單要點》要點：
本文介紹了CSS不規則彈出式菜單要點，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

所謂的不規則彈出式菜單是什么樣的？如圖，菜單和子菜單大小不一致，和簡單的下拉菜單不太一樣。

一、樣式：

要點：確保鼠標移出“素材”后，下面的子菜單不會消失。只有移出全部白色區域后才消失。

二、代碼：

1、HTML部分：

<div class="nav-mo">
  <div class="nav-lis">
   <a href="http://www.snjht.com/sc/" class="n-c">素材</a>
   <ul>
      <li><a href="http://www.snjht.com/1/">PSD素材</a></li>
      <li><a href="http://www.snjht.com/2/">矢量素材</a></li>
      <li><a href="http://www.snjht.com/3/">網頁特效</a></li>
   </ul>
   <br clear="both" />
  </div>
 </div>

2、CSS部分

<style>
body{font: 12px/1.5 '宋體',Arial,Helvetica,sans-serif;}
 * { word-wrap: break-word; }
 ul,li{list-style:none;margin:0;padding:0;}
 .nav-mo a.n-c{
    position:relative;top:-5px;z-index:5;
    color:#4d4d4d;padding:5px 0;
    display:inline-block;/*或block*/
    font-weight:bold;font-family:"微軟雅黑",Microsoft YaHei;
    padding:6px 8px 6px 8px;
    border:1px solid #fff;border-bottom:0px;background-color:#FFFFFF;
 }
 /* 重點 */
 .nav-mo .nav-lis {position:relative;z-index:20;margin:0 5px;*margin:0 2px;height:24px;}
 .nav-mo .nav-lis:hover a.n-c,
 .nav-mo .nav-lis a.n-c:hover,
 .nav-mo .hover a.n-c {
    color:#f60;text-decoration:none;border-color:#bababa;
    -webkit-box-shadow:1px -1px 1px #e0e0e0;-moz-box-shadow:1px -1px 1px #e0e0e0; box-shadow:1px -1px 1px #e0e0e0;
    border:1px solid #bababa; z-index:20;border-bottom:0px;padding-bottom:7px;
 } /*和JQ配合關鍵：.hover*/
 .nav-mo .nav-lis ul{
    position:absolute; top:26px;left:0px; z-index:10;display:none;
    background:#fff;color:#666;border:1px solid #bababa;padding:3px;font-size:12px;
    -webkit-box-shadow:1px 1px 1px #e0e0e0;-moz-box-shadow:1px 1px 1px #e0e0e0;
    width:220px;
 }
 .nav-mo .nav-lis:hover ul,
 .nav-mo .hover ul{display:block;line-height:24px;z-index:10;} /*和JQ配合關鍵：.hover*/
 
 /*下面對彈出菜單欄中的樣式設計，不重要*/
 .nav-mo .nav-lis li{width:50%;float:left;}
 .nav-mo .nav-lis li a{color:#666;display:block;padding:2px 7px;font-size:13px;}
 .nav-mo .nav-lis li a:hover{color:#333;background-color:#f5f5f5;text-decoration:none;display:block;}
 .nav-mo .nav-lis li{padding:0px} 
 
 </style>

注意：.nav-mo .nav-lis:hover a.n-c,使菜單在鼠標移到彈出的子菜單上后，頂部菜單欄仍是hover狀態而不會消失。但為了不同瀏覽器的兼容性，特別是IE，強烈建議使用JS添加hover樣式。

要點說明：

1、如下布局結構。

2、.nav-mo .nav-lis 要進行相對定位，.nav-mo 的作用就是提供給.nav-lis做相對定位使用：

position:relative;z-index:20; 然后UL做成絕對定位position:absolute;top:26px;left:2px;z-index:10; 記得UL的z-index要低。

       菜單項的a塊的底部和UL上方要剛好對接。

3、關鍵：設置.hover下的菜單項a鏈接和ul樣式。JS將調用它。
重點：.nav-mo .hover a.n-c{...} 和 .nav-mo .hover ul{...}，這樣當JQ激活.nav-mo .nav-lis的hover樣式后，其下的a和ul也將顯示。

4、用JQ對div.nav-lis進行hover設置（也可以不用JQ，參下文的CSS說明，但兼容性可能不是太好）：

       $(".nav-mo .nav-lis").hover(function(){

                     $(this).addClass("hover");

              },function(){

                     $(this).removeClass("hover"); 

              }

       );

其實CSS做到位后，可以不依賴JS，但在低級瀏覽器上的兼容性不好。所以為了不同瀏覽器的兼容性，特別是IE，建議使用JS添加hover樣式。

【技術要點】用包含菜單項的鏈接和彈出菜單的“外層標簽div或li”等的.hover樣式控制激活時菜單項和彈出菜單處于hover風格。如這里的<div>外層的div ，而最外層的.nav-mo是用于給.nav-lis提供相對定位作用。

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/42.html