I wasn’t quite sure where to begin with your existing code, so instead, I’ve put together a working sample from scratch. Please note that the supplied example is very basic, and is just one way of achieving the stated goal. I have tested it on Firefox 3.6, and nothing else. There are likely to be cross-browser compatibility issues, especially with the :hover pseudo class in Internet Explorer. The idea behind this code is simply to give you a simple framework from which to work.
I highly recommend that you check out the following articles, as they explain the use of nested lists, the problems with cross-browser compatibility, Javascript solutions to the :hover pseudo class IE problem, and accessibility issues with hiding elements using display: none:
Suckerfish Dropdowns
http://www.alistapart.com/articles/dropdowns
Son of Suckerfish Dropdowns
http://www.htmldog.com/articles/suckerfish/
Hiding with CSS: Problems and solutions
http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/
Okay, onto the code. First, the HTML. Here, I have used nested unordered lists to create the menu structure. This is a good way to go, as a navigation menu is really just a nested list of links. This will display correctly for those that do not use CSS, and will be read correctly by screen readers.
You may wish to look into ways of removing links from the active page. For example, if the active page is Page 1-3, you could replace the a tag with a span tag.
The HTML should be fairly self explanatory. Just give the active menu UL the active class:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<title>Horizontal Menus</title>
</head>
<body>
<div id="topnav">
<ul>
<li>Menu 1
<ul class="active">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
<li><a href="#">Page 1-4</a></li>
</ul>
</li>
<li>Menu 2
<ul>
<li><a href="#">Page 2-1</a></li>
<li><a href="#">Page 2-2</a></li>
<li><a href="#">Page 2-3</a></li>
<li><a href="#">Page 2-4</a></li>
<li><a href="#">Page 2-5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
The CSS is full of comments, so it should be fairly simple to understand. I think the hardest part is getting the formatting right, and making the sub-menus horizontal instead of vertical. You’ve managed that bit, so the rest should be quite easy:
/*
* The contain DIV for the navigation menu.
* Use this to position the menu on the page.
*/
#topnav {
/*
* Set the containing DIV position to
* relative. This allows the UL to be
* positioned relative to this container.
* See static, relative and absolute, here:
* http://www.w3.org/TR/CSS2/visuren.html#choose-position
*/
position: relative;
}
/*
* All ULs (first and second level).
*/
#topnav ul {
/*
* Remove bullets from the UL.
*/
list-style: none;
/*
* Zero margins and padding.
*/
margin: 0;
padding: 0;
/*
* Take the UL out of the normal flows so
* that it can be given absolute positioning
* coordinates, relative to its containing
* block (the #topnav DIV).
*/
position: absolute;
/*
* Align the UL with the left of the #topnav DIV.
*/
left: 0;
/*
* The list must be wide enough to enclose all
* second level list items (5 x 10em).
*/
width: 50em;
/*
* Give the UL height and a background colour.
* This enables the UL that is activated during a
* hover to mask the UL that is active. See
* the active and hover z-index settings.
*/
height: 1.5em;
background: #eeeeee;
}
/*
* All LIs (first and second level).
*/
#topnav li {
/*
* Float the LIs left so that they all
* appear on one line.
*/
float: left;
/*
* Set the width of each LI.
*/
width: 10em;
}
/*
* Second level UL.
*/
#topnav ul ul {
/*
* Hide all second level LIs.
* Set their position to absolute, then
* move them left by 999em.
*/
position: absolute;
left: -999em;
}
/*
* Second level UL.
* Selected when first-level LI is hovered over,
* or when first-level UI has the 'active' class.
*/
#topnav ul li:hover ul, #topnav ul ul.active {
/*
* Show active LIs.
* Reset the left position to zero.
*/
left: 0;
}
/*
* Second level UL.
* Selected when first-level LI is hovered over.
*/
#topnav ul li:hover ul {
/*
* Set the stacking level (z-index) so that it is
* above the active UL.
*/
z-index: 200;
background: #cccccc;
}
/*
* Second level UL.
* Selected when first-level UI has the 'active' class.
*/
#topnav ul ul.active {
/*
* Set the stacking level (z-index) so that it is
* below the UL that is displayed during hover.
*/
z-index: 100;
background: #aaaaaa;
}
Good luck!