Tabs with submenu block out all other tabs?

[TheJoshMan]

Ok, so I have been messing around with a menu idea... And I've apparently done something very very very wrong. I have it "working" (sorta).

It's extremely messy right now, as I have only put about 3 hours into debugging so far. The problem I can't seem to find a fix for is this:

The main menu items use a "fixed width" background image along with the appropriate heights and widths and padding to align them correctly. Any of the menu items which don't have a submenu (Home, Contact) work exactly as they are intended to. However, the items WITH submenus do not. As soon as you hover over the items with submenus, you cannot "release" that item per se. No matter which other items you hover over. You can hover over the submenu items, and they work perfectly, but you cannot hover over any other main menu items UNLESS you move the mouse completely off the menu all together. (this is of course, in FireFox)

Here's a link to a test page:
http://www.eight7teen.com/projects/s...s/Testing.html


Here's my CSS:

/*\\\\\\\\\\\\\\\\\\\-Body Styles-/////////////////////*/

* { /* Reset padding/margin */
   margin: 0;
   padding: 0;
}

body{
   background: #fff;
   font-family: "Lucida Grande", Arial, Helvetica, Verdana, Tahoma, sans-serif;
   font-size: small; 
}

a:link, a:visited, a:hover, a:active{
outline: none !important;
}


/*\\\\\\\\\\\\\\\\\-Menu Styles-/////////////////////////*/

.nav-bg{ /* Styling of the wrapper <div> around the menubar */
background:url('images/wrap-bg.jpg') repeat-x 0 0;
height:77px;
width:900px;
position:relative;
top:100px;
left:100px;
}
#nav{ /* Styling of the main menubar itself */
   display: inline;
   position: absolute;
   clear: none;
   float: left;
   width: 900px;
   height: 61px;
   margin: 0;
   margin-left:24px;
   background: url('images/menu-bg.jpg') repeat-x;
   list-style: none;
}
#nav-left{ /* Main menubar left end cap image */
background:url('images/menu-left.jpg') no-repeat 0 0;
width:24px;
height:43px;
margin:0;
position:absolute;
top:0;
left:0;
margin-left:-24px;
z-index:1000;
}
#nav-right{ /* Main menubar right end cap image */
background:url('images/menu-right.jpg') no-repeat 0 0;
width:24px;
height:43px;
margin:0;
position:absolute;
top:0;
right:0;
margin-right:-24px;
z-index:1000;
}
#nav li{ /* Sets the "normal" or "off" styling of main menu <li> */
   float: left;
   background: transparent;
   font-family: arial,tahoma,sans-serif;
   line-height: 1;
   height:43px;
   width:144px;
}


#nav li:hover{ /* Sets background image of <li> in main menu upon hovering AND for <li class="current"> */
   background: url('images/menu-hover.jpg') no-repeat 0 0;
   padding:0;
   padding-top:7px;
}

#nav li a{ /*Styling of main menu links*/
   display: block;
   float: left;
   padding: 0;
   color: #dadada;
   font-size:1.1em;
   font-weight:bold;
   text-decoration: none;
}

#nav li:hover a,
#nav li a:hover{ /*Styling for main menu links upon :hover*/
   color: #303030;
   text-transform:uppercase;
}

#nav li ul li a{ /* Overriding the above to remove the uppercase from submenus*/
text-transform:none !important;
}



/*Now comes the fun... 
You will have to style each of these differently if you change the names of the main menu items. 
This is what adjusts the position of each main menu item because they use a "fixed width" background image
*/

#nav li#home a{ /*Positioning for the first main menu link*/
   padding: 10px 37px 12px 37px;
}

#nav li#about a{ /*Positioning for the second main menu link*/
   padding: 10px 37px 12px 35px;
}
#nav li#projects a{ /*Positioning for the third main menu link*/
   padding: 10px 18px 12px 19px;
}
#nav li#downloads a{ /*Positioning for the fourth main menu link*/
   padding: 10px 14px 12px 13px;
}
#nav li#clients a{ /*Positioning for the fifth main menu link*/
   padding: 10px 30px 12px 28px;
}
#nav li#contact a{ /*Positioning for the last main menu link*/
   padding: 10px 25px 12px 25px;
}

/*Adjusts the top padding for submenu items*/
#nav li#about ul li a:hover,
#nav li#about ul li:hover a,
#nav li#projects ul li a:hover,
#nav li#projects ul li:hover a,
#nav li#downloads ul li a:hover,
#nav li#downloads ul li:hover a,
#nav li#clients ul li a:hover,
#nav li#clients ul li:hover a,{
  padding-top:3px !important;
}



#nav li ul{ /*Normal positioning of submenu*/
   position: absolute;
   left: -999em;
   z-index: 999;
   list-style: none;
}

#nav li li{ /*Styling of each individual subemnu item*/
   float: left;
   font-size: 85%;
   background:transparent;
   text-indent: 0;
   width:auto;
   margin:0;
   margin-right:10px;
}

#nav li:hover li:hover{ /*Styling of submenu items upon :hover*/
   background: transparent;
}

#nav li:hover ul{ /*Where should the submenu appear in accordance with parent <li>?*/
   top: 0;
   padding-top:46px;
   left: 10px;
   width: 900px;
   z-index:1002;
}

#nav li li a{ /*Styling the submenu links*/
   float: left;
   width: auto !important;
   background: none !important;
   color: #3B200A;
}

#nav li li a:hover{ /*Styles for submenu links upon :hover*/
   color: #fff;
   text-decoration: underline;
   margin-top:-7px;
}

#nav li,
#nav li:hover,
#nav li a,
#nav li a:hover
#nav li:hover a,
#nav li:hover a:hover{
cursor:hand !important;
}

And here's my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Menu Test</title>
      <link rel="stylesheet" type="text/css" href="styles.css">


      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--(IF IE... EAT FECAL MATTER AND DIE!)-->
<!--[if IE]>
<style type="text/css">
body{
behavior:url('csshover.htc'); 
}
#nav li li a:hover{ /*Styles for submenu links upon :hover*/
   margin-top:0;
}
</style>
<![endif]-->



  


   </head>
   <body>

            
<div class="nav-bg">
<div id="nav-left"></div><div id="nav-right"></div>
<ul id="nav">

  <li id="home"><a href="#">Home</a></li>
  <li id="about"><a href="#">About</a>
    <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">What We Do</a></li>
    <li><a href="#">Our Vision</a></li>
    <li><a href="#">Our Staff</a></li>
  </ul>
  </li>
  <li id="projects"><a href="#">Projects</a>
    <ul>
    <li><a href="#">Into The Light: "A Poltergeist Story"</a></li>
    <li><a href="#">The Dark Side: "My Father Was An Evil Genius"</a></li>
    <li><a href="#">Boy Georgia: "Transgenders In Atlanta"</a></li>
  </ul>
  </li>
  <li id="downloads"><a href="#">Downloads</a>
    <ul>
    <li><a href="#">Brushes</a></li>
    <li><a href="#">Fonts</a></li>
    <li><a href="#">Vectors</a></li>
    <li><a href="#">Actions</a></li>
	<li><a href="#">Styles</a></li>
	<li><a href="#">Gradients</a></li>
	<li><a href="#">PSD's</a></li>
	<li><a href="#">Icons</a></li>
	<li><a href="#">Stock Photos</a></li>
  </ul>
  </li>
  <li id="clients"><a href="#">Clients</a>
    <ul>
    <li><a href="#">Geico</a></li>
    <li><a href="#">Ben & Jerry's</a></li>
    <li><a href="#">State Farm</a></li>
    <li><a href="#">Hershey's</a></li>
    <li><a href="#">Intel</a></li>
	<li><a href="#">Alienware</a></li>
	<li><a href="#">Schlumberger</a></li>
  </ul>
  </li>
  <li id="contact"><a href="#">Contact</a></li>
</ul>

</div>
            
   </body></html>

[Nile]

Change:

#nav li:hover ul{ /*Where should the submenu appear in accordance with parent <li>?*/
   top: 0;
   padding-top:46px;
   left: 10px;
   width: 900px;
   z-index:1002;
}

To:

#nav li:hover ul{ /*Where should the submenu appear in accordance with parent <li>?*/
   top: 0;
   margin-top:46px
   left: 10px;
   width: 900px;
   z-index:-12;
}

[TheJoshMan]

thanks man... I guess I had my head up my **** and forgot all about the z-index! LOL