打造最美CSS多级下拉横向导航菜单代码

摘要：本文实例为大家分享了纯CSS实现多级下拉横向导航菜单代码，供大家参考，具体内容如下先看看效果图：实现代码：CSS代码：CSSCode复制内容...

本文实例为大家分享了纯CSS实现多级下拉横向导航菜单代码，供大家参考，具体内容如下

先看看效果图：

打造最美CSS多级下拉横向导航菜单代码1

实现代码：

CSS代码：

CSS Code复制内容到剪贴板 <styletype="text/css"> /*forthisdemoonly*/ #backgroundHolder{width:750px;height:500px;padding-top:10px;margin:0auto;} /*----------------------------------------------------------------------------*/ /*defaultstyling*/ .nav,.navul{list-style-type:none;margin:0;padding:0;} .nava{text-decoration:none;} .nav{font-family:arial,sans-serif;font-size:12px;width:650px;margin:0auto;} /*stylethelinks*/ .nava{background:url(ulmulti3/box.gif)no-repeatrightrightcenter;} .nava.top{background:url(ulmulti3/box.gif)no-repeatrightrighttop;} .nava.top2{background:url(ulmulti3/box2.gif)no-repeatrightrighttop;} .nava.bottombottom{background:url(ulmulti3/box.gif)no-repeatrightrightbottombottom;} .rightrightulula{background:url(ulmulti3/box3.gif)no-repeatrightrightcenter;} .rightrightulula.top2{background:url(ulmulti3/box3.gif)no-repeatrightrighttop;} .rightrightulula.bottombottom{background:url(ulmulti3/box3.gif)no-repeatrightrightbottombottom;} /*styletheelementsothatisdoesnotaffectthesizeofthelink*/ .navab{color:#fff;font-weight:normal;display:block;padding:5px10px5px15px;} .nav.fly.mainb{background:transparenturl(ulmulti3/arrow.gif)no-repeat117px9px;} .nav.downb{background:transparenturl(ulmulti3/arrow2.gif)no-repeat115px11px;} .nav.rightrightulb{text-align:rightright;} .nav.rightrightululb{padding:5px15px5px10px;} .nav.rightrightul.mainb{background:transparenturl(ulmulti3/arrow3.gif)no-repeat15px9px;text-align:rightright;} .nav.rightrightulul.mainb{background:transparenturl(ulmulti3/arrow3.gif)no-repeat5px9px;text-align:rightright;} /*HEIGHT*/ .navulul{top:-24px;}/*positionthetopoftheflyoutfirstsubmenus*/ .navululul{top:-25px;}/*positionthetopoftheflyoutsecondandthirdsubmenus*/ .navul.two{top:-40px;}/*positionthetopoftheflyoutsubmenuswithprevioustextontwolines*/ /*WIDTHchangethisWITHCAREtosuityourrequirements*/ /*setthelinkwidthhere*/ .nav.drop,.nava{width:130px;} .navulli{max-width:130px;}/*fixforIE8*/ /*settheleftflyoutpositionhere*/ .navulul{left:130px;} /*settherightflyoutpositionhere*/ .navli.rightrightulul{left:auto;rightright:120px;} .navli.rightrightululul{left:auto;rightright:130px;} /*makethisWIDTH-1px*//*orWIDTH-0.063emifusingemsizing*/ .nava{margin-right:-129px;} /*----------------------------------------------------------------------------*/ /*DONOTCHANGEANYTHINGBELOW*/ .navli{float:left;}/*fixesIEbugs,andallowsforclearing*/ .navul{float:left;position:relative;z-index:20;}/*necessaryforfloatdropandtostackthe<ul>s*/ .navulli{clear:left;}/*mustclearthefloatedlistiteminsidesublist*/ .nava{position:relative;display:block;}/*needstohaveaposition,tobeabovetherest*/ .nava.main{float:left;/*necessaryforfloatdrop*/margin-top:10000px;}/*bringthetoplevellinksbackintoview*/ .nav.drop,.nav.fly{margin-top:-10000px;}/*hidethesublinksandtheircontainers,operahaslowupperlimits*/ .navul{margin-bottom:-5000px;}/*avoidanyinteractionbetweenthesubs,canbeanylargesize*/ /*ThebitthatdoesALLtheworktobringthesubmenusintoview*/ .nava:hover,.nava:focus,.nava:active{margin-right:0;z-index:10;outline:0;} .nava:hoverb,.nava:focusb,.nava:activeb{color:#000;cursor:pointer;}/*thisisforkeyboardtabbingcolorchange*/ /*OPERAfix*/ .navul:hover,.navulul:hover{clear:left;}/*tostopintermittentsublink:hoverproblems*/ /*----------------------------------------------------------------------------*/ </style> <!--[iflteIE7]> <styletype="text/css"> /*bugfixesforIE7andlower-DONOTCHANGE*/ .nav.fly{width:99%;}/*makeeachflyout99%oftheprevouslevel*/ a:active{}/*requiresablankstylefor:activetostopitbeingbuggy*/ </style>

html代码：

XML/HTML Code复制内容到剪贴板 <body> <divid="backgroundHolder"> <ulclass="nav"> <liclass="drop"><aclass="maintop"href="#url">Home</a></li> <liclass="drop"><aclass="maindowntop"href="#url">Equipment</a> <ul> <liclass="fly"><aclass="main"href="#url">Cameras</a> <ul> <li><aclass="top2"href="#url">FilmType</a></li> <li><ahref="#url">Compact</a></li> <li><ahref="#url">Polaroid</a></li> <li><ahref="#url">Digital</a></li> <liclass="fly"><aclass="main"href="#url">DigitalSLR</a> <ul> <li><aclass="top2"href="#url">Canon</a></li> <li><ahref="#url">Nikon</a></li> <li><ahref="#url">Panasonic</a></li> <li><aclass="bottom"href="#url">Kodak</a></li> </ul> </li> <li><aclass="bottom"href="#url">SecondHand</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">VideoCameras&Accessories</a> <ulclass="two"> <liclass="fly"><aclass="maintop2"href="#url">LatestModels</a> <ul> <li><aclass="top2"href="#url">Nikon</a></li> <li><ahref="#url">Panasonic</a></li> <li><ahref="#url">Canon</a></li> <li><ahref="#url">Pentax</a></li> <li><aclass="bottom"href="#url">Minolta</a></li> </ul> </li> <li><ahref="#url">SpecialOffers</a></li> <li><aclass="bottom"href="#url">Professional</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">Lenses</a> <ul> <liclass="fly"><aclass="maintop2"href="#url">Digital</a> <ul> <li><aclass="top2"href="#url">Standard</a></li> <li><ahref="#url">Telephoto</a></li> <li><ahref="#url">WideAngle</a></li> <liclass="fly"><aclass="main"href="#url">Zoom</a> <ul> <li><aclass="top2"href="#url">Nikon</a></li> <li><ahref="#url">Pentax</a></li> <li><ahref="#url">Minolta</a></li> <li><aclass="bottom"href="#url">Panasonic</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">ZoomwithMacro</a> <ul> <li><aclass="top2"href="#url">Panasonic</a></li> <li><ahref="#url">Minolta</a></li> <li><ahref="#url">Pentax</a></li> <li><ahref="#url">Canon</a></li> <li><aclass="bottom"href="#url">Nikon</a></li> </ul> </li> <li><ahref="#url">Fisheye</a></li> <li><aclass="bottom"href="#url">x2converters</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">StandardSLR</a> <ul> <li><aclass="top2"href="#url">Canon</a></li> <li><ahref="#url">Nikon</a></li> <li><ahref="#url">Panasonic</a></li> <li><ahref="#url">Pentax</a></li> <li><aclass="bottom"href="#url">Minolta</a></li> </ul> </li> <li><ahref="#url">Cases</a></li> <liclass="fly"><aclass="main"href="#url">LargeFormat</a> <ul> <li><aclass="top2"href="#url">Hasselblad</a></li> <li><ahref="#url">Arca-Swiss</a></li> <li><aclass="bottom"href="#url">Leica</a></li> </ul> </li> <li><ahref="#url">LensHoods</a></li> <li><aclass="bottom"href="#url">LensCleaners</a></li> </ul> </li> <li><ahref="#url">Tripods</a></li> <li><ahref="#url">Flashguns</a></li> <li><ahref="#url">Accessories,filters&lenscovers</a></li> <li><ahref="#url">SpecialOffers</a></li> <li><aclass="bottom"href="#url">Electronics</a></li> </ul> </li> <liclass="drop"><aclass="maindowntop"href="#url">Accessories</a> <ul> <liclass="fly"><aclass="main"href="#url">Flashguns</a> <ul> <liclass="fly"><aclass="maintop2"href="#url">DigitalCameras</a> <ul> <li><aclass="top2"href="#url">Nikon</a></li> <li><ahref="#url">Canon</a></li> <li><ahref="#url">Panasonic</a></li> <li><ahref="#url">Pentax</a></li> <li><aclass="bottom"href="#url">Kodak</a></li> </ul> </li> <li><ahref="#url">FilmCameras</a></li> <li><ahref="#url">Reflectors</a></li> <li><ahref="#url">Stands</a></li> <li><ahref="#url">RemoteControl</a></li> <li><aclass="bottom"href="#url">Batteries</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">Filters</a> <ul> <li><aclass="top2"href="#url">UltraViolet</a></li> <li><ahref="#url">Lensprotection</a></li> <li><ahref="#url">Yellow</a></li> <li><ahref="#url">Red</a></li> <li><ahref="#url">Orange</a></li> <li><aclass="bottom"href="#url">Blue</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">RemoteControl</a> <ul> <li><aclass="top2"href="#url">Canon</a></li> <li><ahref="#url">Nikon</a></li> <li><aclass="bottom"href="#url">Pentax</a></li> </ul> </li> <liclass="fly"><aclass="main"href="#url">CameraCases</a> <ul> <li><aclass="top2"href="#url">Pentax</a></li> <li><ahref="#url">Nikox</a></li> <li><ahref="#url">Canon</a></li> <li><ahref="#url">Pentax</a></li> <li><ahref="#url">Kodak</a></li> <li><aclass="bottom"href="#url">Minolta</a></li> </ul> </li> <li><aclass="bottom"href="#url">LensBrush</a></li> </ul> </li> <liclass="dropright"><aclass="maindowntop"href="#url">Outlets</a> <ul> <li><ahref="#url">Support</a></li> <li><ahref="#url">Buying</a></li> <li><ahref="#url">Photographers</a></li> <liclass="fly"><aclass="main"href="#url">Stockist</a> <ul> <li><aclass="top2"href="#url">Currys</a></li> <li><ahref="#url">Dixons</a></li> <li><ahref="#url">Jessops</a></li> <li><aclass="bottom"href="#url">Staples</a></li> </ul> </li> <li><ahref="#5">General</a></li> <liclass="fly"><aclass="mainbottom"href="#url">Sales</a> <ul> <li><aclass="top2"href="#url">USA</a></li> <li><ahref="#url">CANADA</a></li> <li><ahref="#url">SouthAmerica</a></li> <liclass="fly"><aclass="main"href="#url">Europe</a> <ul> <li><aclass="top2"href="#url">Britain</a></li> <li><ahref="#url">France</a></li> <li><ahref="#url">Germany</a></li> <li><ahref="#url">Spain</a></li> <li><aclass="bottom"href="#url">Italy</a></li> </ul> </li> <li><ahref="#url">Australia</a></li> <li><aclass="bottom"href="#url">Asia</a></li> </ul> </li> </ul> </li> <liclass="drop"><aclass="maintop"href="#url">PrivacyPolicy</a></li> </ul> </div> <divalign="center"></div> </body> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。