《CSS不规则弹出式菜单要点》要点：
本文介绍了CSS不规则弹出式菜单要点，希望对您有用。如果有疑问，可以联系我们。
所谓的不规则弹出式菜单是什么样的？如图，菜单和子菜单大小不一致，和简单的下拉菜单不太一样。
一、样式：
要点：确保鼠标移出“素材”后，下面的子菜单不会消失。只有移出全部白色区域后才消失。
二、代码：
1、HTML部分：
<div class=nav-mo> <div class=nav-lis> <a href=http://www.jb51.cc/sc/ class=n-c>素材</a> <ul> <li><a href=http://www.jb51.cc/1/>PSD素材</a></li> <li><a href=http://www.jb51.cc/2/>矢量素材</a></li> <li><a href=http://www.jb51.cc/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提供相对定位作用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。