打造最美CSS多级下拉横向导航菜单代码
本文实例为大家分享了纯CSS实现多级下拉横向导航菜单代码，供大家参考，具体内容如下
先看看效果图：
实现代码：
CSS代码：
CSS Code 复制内容到剪贴板 <style type="text/css"> /* for this demo only */ #backgr oundHolder { width : 750px ; height : 500px ; padding-top : 10px ; margin :0 auto ; } /* ---------------------------------------------------------------------------- */ /* default styling */ .nav, .nav ul { list-style-type : none ; margin :0; padding :0; } .nav a { text-decoration : none ; } .nav { font-family : arial , sans-serif ; font-size : 12px ; width : 650px ; margin :0 auto ; } /* style the links */ .nav a { background : url (ulmulti3/box.gif) no-repeat right right center ; } .nav a. top { background : url (ulmulti3/box.gif) no-repeat right right top ; } .nav a.top2 { background : url (ulmulti3/box2.gif) no-repeat right right top ; } .nav a. bottom bottom { background : url (ulmulti3/box.gif) no-repeat right right bottom bottom ; } . right right ul ul a { background : url (ulmulti3/box3.gif) no-repeat right right center ; } . right right ul ul a.top2 { background : url (ulmulti3/box3.gif) no-repeat right right top ; } . right right ul ul a. bottom bottom { background : url (ulmulti3/box3.gif) no-repeat right right bottom bottom ; } /* style the <b> element so that is does not affect the size of the link */ .nav a b { color : #fff ; font-weight : normal ; display : block ; padding : 5px 10px 5px 15px ; } .nav .fly .main b { background : transparent url (ulmulti3/arrow.gif) no-repeat 117px 9px ; } .nav .down b { background : transparent url (ulmulti3/arrow2.gif) no-repeat 115px 11px ; } .nav . right right ul b { text-align : right right ; } .nav . right right ul ul b { padding : 5px 15px 5px 10px ; } .nav . right right ul .main b { background : transparent url (ulmulti3/arrow3.gif) no-repeat 15px 9px ; text-align : right right ; } .nav . right right ul ul .main b { background : transparent url (ulmulti3/arrow3.gif) no-repeat 5px 9px ; text-align : right right ; } /* HEIGHT */ .nav ul ul { top :- 24px ; } /* position the top of the flyout first sub menus */ .nav ul ul ul { top :- 25px ; } /* position the top of the flyout second and third sub menus */ .nav ul.two { top :- 40px ; } /* position the top of the flyout sub menus with previous text on two lines */ /* WIDTH change this WITH CARE to suit your requirements */ /*set the link width here*/ .nav .drop, .nav a { width : 130px ; } .nav ul li { max-width : 130px ; } /* fix for IE8 */ /* set the left flyout position here */ .nav ul ul { left : 130px ; } /* set the right flyout position here */ .nav li. right right ul ul { left : auto ; right right : 120px ; } .nav li. right right ul ul ul { left : auto ; right right : 130px ; } /* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */ .nav a { margin-right :- 129px ; } /* ---------------------------------------------------------------------------- */ /* DO NOT CHANGE ANYTHING BELOW */ .nav li { float : left ; } /* fixes IE bugs, and allows for clearing */ .nav ul { float : left ; position : relative ; z-index :20; } /* necessary for float drop and to stack the <ul>s */ .nav ul li { clear : left ; } /* must clear the floated list item inside sublist */ .nav a { position : relative ; display : block ; } /* needs to have a position, to be above the rest */ .nav a.main { float : left ; /* necessary for float drop */ margin-top : 10000px ; } /* bring the top level links back into view */ .nav .drop, .nav .fly { margin-top :- 10000px ; } /* hide the sub links and their containers, opera has low upper limits */ .nav ul { margin-bottom :- 5000px ; } /* avoid any interaction between the subs, can be any large size */ /* The bit that does ALL the work to bring the sub menus into view */ .nav a:hover, .nav a:focus, .nav a:active { margin-right :0; z-index :10; outline :0; } .nav a:hover b, .nav a:focus b, .nav a:active b { color : #000 ; cursor : pointer ; } /* this is for keyboard tabbing color change */ /* OPERA fix */ .nav ul:hover, .nav ul ul:hover { clear : left ; } /* to stop intermittent sub link :hover problems */ /* ---------------------------------------------------------------------------- */ </style> <!--[if lte IE 7]> <style type= "text/css" > /* bug fixes for IE7 and lower - DO NOT CHANGE */ .nav .fly { width :99%;} /* make each flyout 99% of the prevous level */ a:active {} /* requires a blank style for :active to stop it being buggy */ </style>html代码：
XML/HTML Code 复制内容到剪贴板 <body> < div id = "backgroundHolder" > < ul class = "nav" > < li class = "drop" > < a class = "main top" href = "#url" > < b > Home </ b > </ a > </ li > < li class = "drop" > < a class = "main down top" href = "#url" > < b > Equipment </ b > </ a > < ul > < li class = "fly" > < a class = "main" href = "#url" > < b > Cameras </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Film Type </ b > </ a > </ li > < li > < a href = "#url" > < b > Compact </ b > </ a > </ li > < li > < a href = "#url" > < b > Polaroid </ b > </ a > </ li > < li > < a href = "#url" > < b > Digital </ b > </ a > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Digital SLR </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Canon </ b > </ a > </ li > < li > < a href = "#url" > < b > Nikon </ b > </ a > </ li > < li > < a href = "#url" > < b > Panasonic </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > Kodak </ b > </ a > </ li > </ ul > </ li > < li > < a class = "bottom" href = "#url" > < b > Second Hand </ b > </ a > </ li > </ ul > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Video Cameras & Accessories </ b > </ a > < ul class = "two" > < li class = "fly" > < a class = "main top2" href = "#url" > < b > Latest Models </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Nikon </ b > </ a > </ li > < li > < a href = "#url" > < b > Panasonic </ b > </ a > </ li > < li > < a href = "#url" > < b > Canon </ b > </ a > </ li > < li > < a href = "#url" > < b > Pentax </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > Minolta </ b > </ a > </ li > </ ul > </ li > < li > < a href = "#url" > < b > Special Offers </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > Professional </ b > </ a > </ li > </ ul > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Lenses </ b > </ a > < ul > < li class = "fly" > < a class = "main top2" href = "#url" > < b > Digital </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Standard </ b > </ a > </ li > < li > < a href = "#url" > < b > Telephoto </ b > </ a > </ li > < li > < a href = "#url" > < b > Wide Angle </ b > </ a > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Zoom </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Nikon </ b > </ a > </ li > < li > < a href = "#url" > < b > Pentax </ b > </ a > </ li > < li > < a href = "#url" > < b > Minolta </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > Panasonic </ b > </ a > </ li > </ ul > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Zoom with Macro </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Panasonic </ b > </ a > </ li > < li > < a href = "#url" > < b > Minolta </ b > </ a > </ li > < li > < a href = "#url" > < b > Pentax </ b > </ a > </ li > < li > < a href = "#url" > < b > Canon </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > Nikon </ b > </ a > </ li > </ ul > </ li > < li > < a href = "#url" > < b > Fisheye </ b > </ a > </ li > < li > < a class = "bottom" href = "#url" > < b > x2 converters </ b > </ a > </ li > </ ul > </ li > < li class = "fly" > < a class = "main" href = "#url" > < b > Standard SLR </ b > </ a > < ul > < li > < a class = "top2" href = "#url" > < b > Canon </ b > </ a > </ li > < li > < a href = "#url" 首页 > 软件教程声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
