首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
简单的二级菜单导航实现css代码
所属分类：
网页制作
/
CSS
阅读数： 1365
收藏 0
赞 0
分享
这种效果在b2c商城经常用的到，刚结束的项目就用到了，简单分享下。
Demo：http://www.ostools.net/jsbin/uiafeaei/1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul{margin:0;padding:0;list-style-type:none;} a{ text-decoration:none;} .mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;} .mold_open{background-position:0 -6px;} .mold_open_hover{background-position:0 0;} .mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;} h1{margin-left:100px;} .menu-cont-list a:hover{text-decoration:underline;} .mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;} .mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;} .mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;} .mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;} .mod-menu .menu-item a:hover{ text-decoration:none;} .mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;} .mod-menu .menu-cont-list{padding:0 30px;} .mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;} .mod-menu .menu-cont-list li:last-child{border-bottom:none;} .mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;} .mod-menu .menu-cont-list h3 a{color:#222;} .mod-menu .menu-list-link a{color:#666;line-height:24px;} .mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var mod_menu=$(".mod-menu");//导航模块区 var menu=function(){ var menuItem=$(".menu-item li");//选择导航列表 menuItem.each(function(){ var _index=$(this).index();//获取当前选择菜单列表的索引 $(this).mouseenter(function(){ var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标 $(".menu-cont").show(); $(".menu-cont").css("top",y);//需要显示的对应索引内容 $(this).addClass("mouse-bg").siblings().removeClass("mouse-bg"); $(".menu-cont>div").eq(_index).show().siblings().hide(); }); });/*导航菜单菜单*/ $(".mod-menu").mouseleave(function(){ $(".menu-cont").hide(); menuItem.removeClass("mouse-bg"); }) }//展开二级菜单 menu();//执行展开二级菜单函 }); </script> </head> <body> <h1>简单的2级菜单导航</h1> <div class="mod-menu f-l"> <div id="column-left"> <ul class="menu-item"> <li class=""><a href="trade-wedding.html">Wedding</a></li> <li class=""><a href="trade-occasion-dresses.html">Occasion Dresses</a></li> <li class=""><a href="trade-women-s-clothing.html">Women's Clothing</a></li> <li class=""><a href="trade-women-s-shoes.html">Women's Shoes</a></li> <li class=""><a href="trade-accessories.html">Accessories</a></li> <li class=""><a href="trade-beauty-health.html">Beauty & Health</a></li> </ul><!--一级菜单列表--> <div class="menu-cont hide" style="display: none; top: 241px;"> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="wedding-dresses-c1_2.html">Wedding Dresses</a></h3> <div class="menu-list-link"></div> </li> <li> <h3><a href="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3> <div class="menu-list-link"></div> </li> <li> <h3><a href="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3> <div class="menu-list-link"> <a title="" href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a> <span class="long-string">|</span> <a title="" href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a> <span class="long-string">|</span> <a title="" href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a> </div> </li> <li> <h3><a href="wedding-accessories-c1_6.html">Wedding Accessories</a></h3> <div class="menu-list-link"> <a title="" href="fabric-swatch-c1_6_100.html">Fabric Swatch</a> <span class="long-string">|</span> <a title="" href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a> <span class="long-string">|</span> <a title="" href="wedding-veils-c1_6_48.html">Wedding Veils</a> <span class="long-string">|</span> <a title="" href="wedding-gloves-c1_6_51.html">Wedding Gloves</a> <span class="long-string">|</span> <a title="" href="wedding-shawls-c1_6_47.html">Wedding Shawls</a> <span class="long-string">|</span> <a title="" href="wedding-flowers-c1_6_52.html">Wedding Flowers</a> <span class="long-string">|</span> <a title="" href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="prom-dresses-c103_39.html">Prom Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="evening-dresses-c103_40.html">Evening Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="ball-gowns-c103_43.html">Ball Gowns</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="little-black-dresses-c103_45.html">Little Black Dresses </a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="dresses-c7_8.html">Dresses</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="clubwear-c7_9.html">Clubwear</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="leggings-c7_12.html">Leggings</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="lingeries-c7_13.html">Lingeries</a></h3> <div class="menu-list-link"> <a title="" href="bras-c7_13_54.html">Bras</a> <span class="long-string">|</span> <a title="" href="babydolls-c7_13_56.html">Babydolls</a> <span class="long-string">|</span> <a title="" href="teddies-c7_13_57.html">Teddies</a> <span class="long-string">|</span> <a title="" href="panties-c7_13_58.html">Panties</a> <span class="long-string">|</span> <a title="" href="hosiery-c7_13_59.html">Hosiery</a> </div> </li> <li> <h3><a href="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="costumes-c7_53.html">Costumes</a></h3> <div class="menu-list-link"> <a title="" href="sexy-costumes-c7_53_110.html">Sexy Costumes</a> <span class="long-string">|</span> <a title="" href="christmas-costumes-c7_53_119.html">Christmas Costumes</a> <span class="long-string">|</span> <a title="" href="halloween-costumes-c7_53_111.html">Halloween Costumes</a> <span class="long-string">|</span> <a title="" href="halloween-accessories-c7_53_112.html">Halloween Accessories</a> <span class="long-string">|</span> <a title="" href="zentai-c7_53_121.html">Zentai</a> </div> </li> <li> <h3><a href="swimwear-c7_11.html">Swimwear</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="activewear-c7_10.html">Activewear</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="heels-c116_60.html">Heels</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="pumps-c116_117.html">Pumps</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="dance-shoes-c116_62.html">Dance Shoes</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="boots-c116_63.html">Boots</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: none;"> <ul> <li> <h3><a href="evening-bags-c15_113.html">Evening Bags</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="hats-scarves-c15_16.html">Hats & Scarves</a></h3> <div class="menu-list-link"> <a title="" href="womens-hats-c15_16_64.html">Womens Hats</a> <span class="long-string">|</span> <a title="" href="womens-scarves-c15_16_65.html">Womens Scarves</a> </div> </li> <li> <h3><a href="jewelry-c15_17.html">Jewelry</a></h3> <div class="menu-list-link"> <a title="" href="earrings-c15_17_66.html">Earrings</a> <span class="long-string">|</span> <a title="" href="necklaces-c15_17_67.html">Necklaces</a> <span class="long-string">|</span> <a title="" href="rings-c15_17_68.html">Rings</a> </div> </li> <li> <h3><a href="watches-c15_18.html">Watches</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> <div class="menu-cont-list" style="display: block;"> <ul> <li> <h3><a href="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="fascinators-c19_69.html">Fascinators</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="makeup-tools-c19_21.html">Makeup Tools</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="spas-massagers-c19_71.html">Spas & Massagers</a></h3> <div class="menu-list-link"> </div> </li> <li> <h3><a href="health-fitness-c19_70.html">Health & Fitness</a></h3> <div class="menu-list-link"> </div> </li> </ul> </div> </div> </div><!--二级菜单内容--> </div> </body> </html>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
从世界杯观赛看，“移动视频”就是个伪命题
Google
教育培训类网站的盈利模式
什么样的网站赚钱 怎么赚钱？
谷歌广告怎么收款？光大银行需要携带资料到柜台办理
个人建站赚钱方法有哪些?5种常见方法汇总
站长故事
更多
从地图到苹果6！盘点苹果产品的四大败笔
快播之死：中国互联网的政策红利期已结束
一个年入80W的96年草根站长
从月薪3500到身价3千万
浅谈网站站长之现状
暴走漫画运营经理 这就是高级运营与初级运营的区别
