CSS不规则弹出式菜单要点

《CSS不规则弹出式菜单要点》要点：
本文介绍了CSS不规则弹出式菜单要点，希望对您有用。如果有疑问，可以联系我们。

相关主题：CSS2和CSS3特效

所谓的不规则弹出式菜单是什么样的？如图，菜单和子菜单大小不一致，和简单的下拉菜单不太一样。

一、样式：

要点：确保鼠标移出“素材”后，下面的子菜单不会消失。只有移出全部白色区域后才消失。

二、代码：

1、HTML部分：

<div class="nav-mo">
  <div class="nav-lis">
   <a href="http://www.vephp.com/sc/" class="n-c">素材</a>
   <ul>
      <li><a href="http://www.vephp.com/1/">PSD素材</a></li>
      <li><a href="http://www.vephp.com/2/">矢量素材</a></li>
      <li><a href="http://www.vephp.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.vephp.com/jiaocheng/42.html