《CSS不規(guī)則彈出式菜單要點(diǎn)》要點(diǎn)：
本文介紹了CSS不規(guī)則彈出式菜單要點(diǎn)，希望對(duì)您有用。如果有疑問，可以聯(lián)系我們。

相關(guān)主題：CSS2和CSS3特效

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

一、樣式：

要點(diǎn)：確保鼠標(biāo)移出“素材”后，下面的子菜單不會(huì)消失。只有移出全部白色區(qū)域后才消失。

二、代碼：

1、HTML部分：

<div class="nav-mo">
  <div class="nav-lis">
   <a href="http://www.fzlkiss.com/sc/" class="n-c">素材</a>
   <ul>
      <li><a href="http://www.fzlkiss.com/1/">PSD素材</a></li>
      <li><a href="http://www.fzlkiss.com/2/">矢量素材</a></li>
      <li><a href="http://www.fzlkiss.com/3/">網(wǎng)頁(yè)特效</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;
 }
 /* 重點(diǎn) */
 .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配合關(guān)鍵：.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配合關(guān)鍵：.hover*/
 
 /*下面對(duì)彈出菜單欄中的樣式設(shè)計(jì)，不重要*/
 .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,使菜單在鼠標(biāo)移到彈出的子菜單上后，頂部菜單欄仍是hover狀態(tài)而不會(huì)消失。但為了不同瀏覽器的兼容性，特別是IE，強(qiáng)烈建議使用JS添加hover樣式。

要點(diǎn)說明：

1、如下布局結(jié)構(gòu)。

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

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

       菜單項(xiàng)的a塊的底部和UL上方要?jiǎng)偤脤?duì)接。

3、關(guān)鍵：設(shè)置.hover下的菜單項(xiàng)a鏈接和ul樣式。JS將調(diào)用它。
重點(diǎn)：.nav-mo .hover a.n-c{...} 和 .nav-mo .hover ul{...}，這樣當(dāng)JQ激活.nav-mo .nav-lis的hover樣式后，其下的a和ul也將顯示。

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

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

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

              },function(){

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

              }

       );

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

【技術(shù)要點(diǎn)】用包含菜單項(xiàng)的鏈接和彈出菜單的“外層標(biāo)簽div或li”等的.hover樣式控制激活時(shí)菜單項(xiàng)和彈出菜單處于hover風(fēng)格。如這里的<div>外層的div ，而最外層的.nav-mo是用于給.nav-lis提供相對(duì)定位作用。

轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/42.html