如何制作纯css的下拉菜单？

Question

如何制作纯css的下拉菜单？

我正在寻找水平下拉菜单纯css和浏览器兼容....

我看起来像下面提到的例子

Answer 1

看到这是纯粹的CSS基础下拉菜单： -HTML<ul&nbsp;id="menu"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Home</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">About&nbsp;Us</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">The&nbsp;Team</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">History</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Vision</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Products</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Cozy&nbsp;Couch</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Great&nbsp;Table</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Small&nbsp;Chair</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Shiny&nbsp;Shelf</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Invisible&nbsp;Nothing</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Contact</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Online</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Right&nbsp;Here</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Somewhere&nbsp;Else</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;</ul>CSSul{ &nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;Arial,&nbsp;Verdana; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none;}ul&nbsp;li{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;}li&nbsp;ul{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;}ul&nbsp;li&nbsp;a&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#ffffff; &nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;1px&nbsp;solid&nbsp;#ffffff; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;5px&nbsp;15px&nbsp;5px&nbsp;15px; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#2C5463; &nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;1px; &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;nowrap;}ul&nbsp;li&nbsp;a:hover&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#617F8A;}li:hover&nbsp;ul&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;}li:hover&nbsp;li{ &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;11px;}li:hover&nbsp;a&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#617F8A;}li:hover&nbsp;li&nbsp;a:hover&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#95A9B1;}

Answer 2

html,&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;Arial,&nbsp;Helvetica,&nbsp;sans-serif;}/*&nbsp;define&nbsp;a&nbsp;fixed&nbsp;width&nbsp;for&nbsp;the&nbsp;entire&nbsp;menu&nbsp;*/.navigation&nbsp;{ &nbsp;&nbsp;width:&nbsp;150px;}/*&nbsp;reset&nbsp;our&nbsp;lists&nbsp;to&nbsp;remove&nbsp;bullet&nbsp;points&nbsp;and&nbsp;padding&nbsp;*/.mainmenu,&nbsp;.submenu&nbsp;{ &nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;margin:&nbsp;0;}/*&nbsp;make&nbsp;ALL&nbsp;links&nbsp;(main&nbsp;and&nbsp;submenu)&nbsp;have&nbsp;padding&nbsp;and&nbsp;background&nbsp;color&nbsp;*/.mainmenu&nbsp;a&nbsp;{ &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;background-color:&nbsp;#CCC; &nbsp;&nbsp;text-decoration:&nbsp;none; &nbsp;&nbsp;padding:&nbsp;10px; &nbsp;&nbsp;color:&nbsp;#000;}/*&nbsp;add&nbsp;hover&nbsp;behaviour&nbsp;*/.mainmenu&nbsp;a:hover&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#C5C5C5;}/*&nbsp;when&nbsp;hovering&nbsp;over&nbsp;a&nbsp;.mainmenu&nbsp;item, &nbsp;&nbsp;display&nbsp;the&nbsp;submenu&nbsp;inside&nbsp;it. &nbsp;&nbsp;we're&nbsp;changing&nbsp;the&nbsp;submenu's&nbsp;max-height&nbsp;from&nbsp;0&nbsp;to&nbsp;200px; */.mainmenu&nbsp;li:hover&nbsp;.submenu&nbsp;{ &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;max-height:&nbsp;200px;}/* &nbsp;&nbsp;we&nbsp;now&nbsp;overwrite&nbsp;the&nbsp;background-color&nbsp;for&nbsp;.submenu&nbsp;links&nbsp;only. &nbsp;&nbsp;CSS&nbsp;reads&nbsp;down&nbsp;the&nbsp;page,&nbsp;so&nbsp;code&nbsp;at&nbsp;the&nbsp;bottom&nbsp;will&nbsp;overwrite&nbsp;the&nbsp;code&nbsp;at&nbsp;the&nbsp;top. */.submenu&nbsp;a&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;#999;}/*&nbsp;hover&nbsp;behaviour&nbsp;for&nbsp;links&nbsp;inside&nbsp;.submenu&nbsp;*/.submenu&nbsp;a:hover&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;#666;}/*&nbsp;this&nbsp;is&nbsp;the&nbsp;initial&nbsp;state&nbsp;of&nbsp;all&nbsp;submenus. &nbsp;&nbsp;we&nbsp;set&nbsp;it&nbsp;to&nbsp;max-height:&nbsp;0,&nbsp;and&nbsp;hide&nbsp;the&nbsp;overflowed&nbsp;content. */.submenu&nbsp;{ &nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;max-height:&nbsp;0; &nbsp;&nbsp;-webkit-transition:&nbsp;all&nbsp;0.5s&nbsp;ease-out;}<html><body><head><link&nbsp;rel="stylesheet"&nbsp;type="css/text"&nbsp;href="nav.css"></head></body><nav&nbsp;class="navigation"> &nbsp;&nbsp;<ul&nbsp;class="mainmenu"> &nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Home</a></li> &nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">About</a></li> &nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Products</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="submenu"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Tops</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Bottoms</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Footwear</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul> &nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;<li><a&nbsp;href="">Contact&nbsp;us</a></li> &nbsp;&nbsp;</ul></nav>