css3 - CSS menu like microsofts -
so want create menu 1 on www.microsoft.com. however, want in css, no scripts, , want menu drop down on hover, not click. here have.
html:
<html> <head> <link rel="stylesheet" href="test5.css" type="text/css"> </head> <body> <nav> <ul> <li><a href="#">one</a></li> <li>two</a> <ul> <li><a href="#">three</a></li> <li><a href="#">four</a></li> <li><a href="#">five</a> <ul> <li><a href="#">six</a></li> <li><a href="#">seven</a></li> </ul> </li> </ul> </li> <li>eight</a> <ul> <li><a href="#">nine</a></li> <li><a href="#">ten</a></li> </ul> </li> <li><a href="#">eleven</a></li> </ul> </nav> </body> </html>`
css:
*{ margin:0; padding:0; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #888; list-style: none; position: fixed; display: inline-table; width:100%; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; width:25%; } nav ul li:hover { background: #4b545f; } nav ul li:hover { color: #fff; } nav ul li { display: block; padding: 25px 40px; color: #757575; text-decoration: none; width:100%; }
i'm pretty sure you're looking little hard figure out wanted, made example you, sure check in browsers need position:absolute works you: http://jsfiddle.net/5vkzg/
links jsfiddle.net must accompanied code.
at least can build it.
Comments
Post a Comment