Advanced Search

Create dropdown menus with CSS only

/ Published in: CSS
Save to your folder(s)
Doesn't work in IE6

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>JankoAtWarpSpeed demos: Create dropdown menus with CSS only</title>
  5.     <style type="text/css">
  6.         body { font-family:Arial, Sans-Serif; font-size:13px; margin:0px;
  7.                background: transparent url(page_bkg.png) repeat scroll top center;}
  8.         h1 {margin:0px; padding:20px 0 0 20px;}
  9.         p {padding:20px; color:#dcdcdc;}
  10.         p a {color:#9BD800;}
  11.         p a:hover {color:#B6FF00;}
  12.         #header { height:120px; position:relative;
  13.                   background: transparent url(header_bkg.png) repeat-x scroll top center;}
  14.         #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
  15.         #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 
  16.                     position:relative; padding:10px; width:100px;}
  17.         #nav > li:hover ul { display:block; }
  18.         #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
  19.  
  20.         #nav li ul { margin:0px; padding:0px; display:none;}
  21.         #nav li ul li { list-style-type:none; margin:10px 0 0 0;}
  22.         #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
  23.         #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
  24.         #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
  25.    </style>
  26. </head>
  27. <body>
  28.     <div id="header">
  29.         <h1>JankoAtWarpSpeed demos</h1>
  30.         <ul id="nav">
  31.  
  32.             <li><span>Menu 1</span>
  33.                 <ul>
  34.                     <li><a href="#">Menu item 1</a></li>
  35.                     <li><a href="#">Menu item 2</a></li>
  36.                     <li><a href="#">Menu item 3</a></li>
  37.                </ul>
  38.             </li>
  39.  
  40.             <li><span>Menu 2</span>
  41.                 <ul>
  42.                     <li><a href="#">Menu item 1</a></li>
  43.                     <li><a href="#">Menu item 2</a></li>
  44.                     <li><a href="#">Menu item 3</a></li>
  45.                </ul>
  46.             </li>            
  47.             <li><span>Menu 3</span>
  48.  
  49.                 <ul>
  50.                     <li><a href="#">Menu item 1</a></li>
  51.                     <li><a href="#">Menu item 2</a></li>
  52.                     <li><a href="#">Menu item 3</a></li>
  53.                </ul>
  54.             </li>
  55.         </ul>
  56.  
  57.     </div>
  58.     <p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx">Create dropdown menus with CSS only</a></p>
  59. </body>
  60. </html>

URL: http://www.jankoatwarpspeed.com/examples/drop-down-list-menus/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.