CSS Drop Down Menu Code

 

Let me start with the CSS code, edit the colors and sizes to suit your websites needs:

ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #1e7c9a; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #3b3b3b; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #3b3b3b; } li:hover li a:hover { background: #1e7c9a; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

ul {     font-family: Arial, Verdana;     font-size: 14px;     margin: 0;     padding: 0;     list-style: none; } ul li {     display: block;     position: relative;     float: left; } li ul {     display: none; } ul li a {     display: block;     text-decoration: none;     color: #ffffff;     border-top: 1px solid #ffffff;     padding: 5px 15px 5px 15px;     background: #1e7c9a;     margin-left: 1px;     white-space: nowrap; } ul li a:hover { background: #3b3b3b; } li:hover ul {     display: block;     position: absolute; } li:hover li {     float: none;     font-size: 11px; } li:hover a { background: #3b3b3b; } li:hover li a:hover {     background: #1e7c9a; }

Next is the HTML code. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul> <li><a href="#">The Team</a></li> <li><a href="#">History</a></li> <li><a href="#">Vision</a></li> </ul> </li> <li><a href="#">Products</a> <ul> <li><a href="#">Cozy Couch</a></li> <li><a href="#">Great Table</a></li> <li><a href="#">Small Chair</a></li> <li><a href="#">Shiny Shelf</a></li> <li><a href="#">Invisible Nothing</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">Online</a></li> <li><a href="#">Right Here</a></li> <li><a href="#">Somewhere Else</a></li> </ul> </li> </ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<ul id="menu">     <li><a href="#">Home</a></li>     <li><a href="#">About Us</a>         <ul>             <li><a href="#">The Team</a></li>             <li><a href="#">History</a></li>             <li><a href="#">Vision</a></li>         </ul>     </li>     <li><a href="#">Products</a>         <ul>             <li><a href="#">Cozy Couch</a></li>             <li><a href="#">Great Table</a></li>             <li><a href="#">Small Chair</a></li>             <li><a href="#">Shiny Shelf</a></li>             <li><a href="#">Invisible Nothing</a></li>         </ul>     </li>     <li><a href="#">Contact</a>         <ul>             <li><a href="#">Online</a></li>             <li><a href="#">Right Here</a></li>             <li><a href="#">Somewhere Else</a></li>         </ul>     </li> </ul>

That is it, very simple and easy to customize! Click below for a live demo…

 

You can see a LIVE PREVIEW here

Tweet