CSS3 dropdown menu 下拉菜单

《CSS3 dropdown menu 下拉菜单》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS3dropdownmenu下拉菜单Todayyou’lllearnhowtocreateyourownCSSdropdownmenu,withoutanyadditionalJavascriptcode.Therearenoimagesusedand,asusual,minimalHTMLmarkup.Let’sseehowismade:Ifyou’reinahurry,here’stheresult:ViewdemoHTMLstructureAsyoucanseeinthefollowinglines,theHTMLstruc

2、turedoesnotcontainmorethanweneed,it’saminimaloneandeasytounderstand.

4、ructureInmyexample,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-gra

5、dient(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-r

6、adius: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

7、;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;back

8、ground:#444;background:-moz-linear-gradient(#444,#111);background:-webkit-gradient(linear,leftbottom,lefttop,c