Going horizontal

If you have the need for a horizontal menu rather than a vertical one, there is not that much you need to do different.  The basic principles still apply.

The actual menu structure remains completely unchanged.  Its all in the css coding.

Before we start, get rid of the spoiler <div> and its styling code.  It's served its purpose.

First we need to add code to the level 1 <ul> so that it is wide and narrow, thus constraining the <li> elements.  And we need to float the <li> elements so that they follow each other in a line instead of stacking up on top of each other.

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

   div#navigation ul.level1 {
      width: 500px;
      height: 25px;
   }
	

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

We also have to make some tweaks to the sub-menu which includes changing the offsets of the sub-menu so that it appears correctly relative to its parents new position.

   div#navigation ul ul {
      position: absolute;
      display: none;
      border-bottom: none;
   }
   

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

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

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

This all results in a display like this:

Note that the 'Services' menu item still needs some styling work and you will find you can't reach the sub-menu to keep it displayed.  This is because the height of the 'Services' <li> is not the full height.

But you can fix this - can't you?

You now know all the basics of producing a pure css driven dynamic menu, either vertical or horizontal.  How you style it, size it, place it in the position you want on the page are up to you.

You can also extend the process to have sub-menus of sub-menus.