Appearance and position in life are everything - so they say!

Lets start by adding in some <a> elements to provide our hyperlinks and some real world menu items.

   <div id='navigation'>
      <ul class='level1'>
         <li><a href='home.html'>Home</a></li>
         <li><a href='about.html'>About us</a></li>
         <li class='submenu' >Services
            <ul class='level2' id='sub1'>
               <li><a href='design.html'>Web site design</a></li>
               <li><a href='hosting.html'>Web site hosting</a></li>
               <li><a href='search.html'>Search engine submission</a></li>
            </ul>
         </li>
         <li><a href='contact.html'>Contact us</a></li>
      </ul>
   </div>   
   

Display this version in your browser and you will see that as well as looking a bit on the dull side there is some overlap of text. Lets start fixing these problems.

   div#navigation {
   /* Coding as required for page location*/
      position: relative;
      font-size: 12px;
      font-family: Verdana, Arial, sans-serif;
   }
	

   div#navigation ul {
      list-style: none;
      list-image: none;
      margin: 0;
      padding: 0;
      position: absolute;
      border: 1px solid #000;
      border-bottom: none;
      background-color: #C8C8C8;
      width: 80px;
   }
	

   div#navigation ul.level1 li {
      position: relative;
      border-bottom: 1px solid #000;
   }
   

   div#navigation li.submenu:hover ul.level2 {
      display: block;
      left: 79px;
      top: 0px;
   }
	

   div#navigation ul#sub1 {
      width: 170px;
   }
	

   div#navigation li a {
      display: block;
      padding: 3px 0 3px 3px;
      text-decoration: none;
   }
	

   div#navigation ul.level1 a {
      width: 77px;   
   }
	

   div#navigation ul#sub1 a {
      width: 167px;
   }
	

   div#navigation li a:hover {
      color: #FFF;
      background-color: #00F;
   }
	

Apply this to our menu structure and the first level of the menu now displays like this:

Role the cursor over one of the hyperlinks and you get this:

When we move the cursor over the 'Services' menu item we get:

If you look back in the styling code to the left offset we set for the sub-menu, you will see that its 1px short of the width of the first level menu.  This keeps the sub-menu just inside its parent and avoids the need to rush the cursor movement going from one to the other.

Where's my menu gone?

There's a common problem that catches people out with menus and it's to do with the way the browser give default z-index to the block elements as they resolve the page.  If you haven't come across this term before, z-index reflects the front to back position of an element (in other words, layers) in the same way that x and y reflect the left to right and top to bottom position.  What follows is deliberately contrived to make a point.

Add this piece of code below the menu structure,

   <div id='spoiler'>
      
   </div>
	

and this style coding to the bottom of the coding block,

   div#spoiler {
      position: absolute;
      top: 0;
      left: 88px;
      width: 200px;
      height: 150px;
      background-color: #F00;
   }
	

display your page and you see this:

Move the cursor over the 'Services' menu item and - no sub-menu.  In fact it has displayed but its behind the red block.  Revisit the styling code for the navigation <div> element and give it a z-index greater than 0.

   div#navigation {
   /* Coding as required for page location. */
      position: relative;
      z-index: 1;
      font-size: 12px;
      font-family: Verdana, Arial, sans-serif;
   }
	

Now try it!

The 'Services' menu item is looking a bit forgotten.  I leave it as an exercise for you to style.  Hint - its <li> element belongs to the class of 'submenu'.  You might try something that marks it out as having a sub-menu rather than it being just another menu item.