CSS3 dropdown menu 下拉菜单.docx

CSS3dropdownmenu下拉菜单
Todayyou’lllearnhowtocreateyourownCSSdropdownmenu,withoutanyadditionalJavascriptcode.Therearenoimagesusedand,asusual,minimalHTMLmarkup.Let’sseehowismade:

Ifyou’reinahurry,here’stheresult:
Viewdemo
HTMLstructure
Asyoucanseeinthefollowinglines,theHTMLstructuredoesnotcontainmorethanweneed,it’saminimaloneandeasytounderstand.
<ulid="menu"><li><ahref="#">Home</a></li><li><ahref="#">Categories</a><ul><li><ahref="#">CSS</a></li><li><ahref="#">Graphicdesign</a></li><li><ahref="#">Developmenttools</a></li><li><ahref="#">Webdesign</a></li></ul></li><li><ahref="#">Work</a></li><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul>
Onemorething,alsoveryimportant,thisissemanticHTML.It’salogicalstructureandhasacorrectmeaning,evenifstylingistotallymissingatthispoint:
CleanandaccessibleHTMLstructure
Inmyexample,the“Categories”sectionistheonlyonewhocontainsasub-list,butyoucaneasyaddsub-liststoanymenuitem.
TheCSS/*Mainmenu*/#menu{width:100%;margin:0;padding:10px000;list-style:none;background:#111;background:-moz-linear-gradient(#444,#111);background:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#111),color-stop(1,#444));background:-webkit-linear-gradient(#444,#111);background:-o-linear-gradient(#444,#111);background:-ms-linear-gradient(#444,#111);background:linear-gradient(#444,#111);-moz-border-radius:50px;border-radius:50px;-moz-box-shadow:02px1px#9c9c9c;-webkit-box-shadow:02px1px#9c9c9c;box-shadow:02px1px#9c9c9c;}#menuli{float:left;padding:0010px0;position:relative;}#menua{float:left;height:25px;padding:025px;color:#999;text-transform:uppercase;font:bold12px/25pxArial,Helvetica;text-decoration:none;text-shadow:01px0#000;}#menuli:hover>a{color:#fafafa;}*html#menulia:hover/*IE6*/{color:#fafafa;}#menuli:hover>ul{display:block;}/*Sub-menu*/#menuul{list-style:none;margin:0;padding:0;display:none;position:absolute;top:35px;left:0;z-index:99999;background:#444;background:-moz-linear-gradient(#444,#111);background:-webkit-gradient(linear,leftbotto