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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -