Hover problem with Menu

galley · 30-04-2009 10:58am #1

Hiya,

Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default.

It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help?

Thanks a mil. Full Code and styles below. Alternatively, you can find it displayed here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Menu Problem</title> 
<link href="menu.css" rel="stylesheet" type="text/css" /> 
 
 
 <!-- The line below starts the conditional comment --> 
 <!--[if IE]>
  <style type="text/css">
   body {behavior: url(csshover.htc);}
  </style>
 <![endif]--> <!-- This ends the conditional comment --> 
</head> 
 
<body> 
 
<div class="container"> 
	<p>First Active Tab:</p> 
	<div class="nav"> 
		<ul> 
		<li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> 
			<ul class="item1"> 
			<li><span>Caption for Item 1. Caption for Item 1. </span></li> 
			</ul> 
		</li> 
		
		<li><a href="#" title="Item 2"><span>Item 2</span></a> 
			<ul class="item2"> 
			<li><span>Caption for Item 2. Caption for Item 2. </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 3"><span>Item 3</span></a> 
			<ul class="item3"> 
			<li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 4"><span>Item 4</span></a> 
			<ul class="item4"> 
			<li><span>Caption for Item 4. Caption for Item 4. </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 5"><span>Item 5</span></a> 
			<ul class="item5"> 
			<li><span>Caption for Item 5. Caption for Item 5.  </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 6"><span>Item 6</span></a> 
			<ul class="item6"> 
			<li><span>Caption for Item 6. Caption for Item 6.</span></li> 
			</ul> 
		</li> 
		</ul> 
 	</div> 
	<!-- End nav --> 
	
	<p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> 
	
	<div class="nav"> 
		<ul> 
		<li><a href="#" title="Item 1"><span>Item 1</span></a> 
			<ul class="item1"> 
			<li><span>Caption for Item 1. Caption for Item 1. </span></li> 
			</ul> 
		</li> 
		
		<li><a href="#" title="Item 2"><span>Item 2</span></a> 
			<ul class="item2"> 
			<li><span>Caption for Item 2. Caption for Item 2. </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 3"><span>Item 3</span></a> 
			<ul class="item3"> 
			<li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> 
			</ul> 
		</li> 
		<li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> 
			<ul class="item4"> 
			<li><span>Caption for Item 4. Caption for Item 4. </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 5"><span>Item 5</span></a> 
			<ul class="item5"> 
			<li><span>Caption for Item 5. Caption for Item 5.  </span></li> 
			</ul> 
		</li> 
		<li><a href="#" title="Item 6"><span>Item 6</span></a> 
			<ul class="item6"> 
			<li><span>Caption for Item 6. Caption for Item 6.</span></li> 
			</ul> 
		</li> 
		</ul> 
 	</div> 
	<!-- End nav --> 
</div> 
</body> 
</html>

The Menu CSS is like so:

/* CSS Document */

body{margin: auto; text-align: center; background: #fff; font-size: 80%;}
.container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;}

/* Main Menu */
.container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } 
.container .nav ul{list-style: none; position:relative;}
.container .nav ul li{display: inline; float: left;  position:relative; font-size: 0.9em; }
.container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; }
.container .nav ul li a, .container #nav ul li a span{ display: block; float: left;}
/* Hide from IE5-Mac \*/
.container .nav a, .container .nav a span{float: none}
.container .nav ul li a:hover{text-decoration:none; color:#fff;  background: #351405; }
.container .nav ul li.active a{text-decoration:none; color:#fff;  background: #351405; }
.container .nav ul li.active a span{text-decoration:none; color:#fff;  background: #351405; }

.container .nav ul li.active ul{display: block;}

.container .nav ul li a span{background: #A90100; padding-right: 20px; }
.container .nav ul li a:hover span{text-decoration:none; color:#fff;  background: #351405; }
.container
.container .nav li > ul {top: auto;left:auto;}
.container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;}
.container .nav ul li:hover ul{ z-index:100;}

.container .nav ul li ul.item1{ left: 10px; z-index: 0;}
.container .nav ul li ul.item2{ left: -67px; z-index: 0;}
.container .nav ul li ul.item3{ left: -144px; z-index: 0;}
.container .nav ul li ul.item4{ left: -221px; z-index: 0;}
.container .nav ul li ul.item5{ left: -298px; z-index: 0;}
.container .nav ul li ul.item6{ left: -375px; z-index: 0;}

.container .nav ul li:hover ul.item1{z-index: 100;}
.container .nav ul li:hover ul.item2{z-index: 100;}
.container .nav ul li:hover ul.item3{z-index: 100;}
.container .nav ul li:hover ul.item4{z-index: 100;}
.container .nav ul li:hover ul.item5{z-index: 100;}
.container .nav ul li:hover ul.item6{z-index: 100;}

.container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;}

.container .nav ul li:hover ul {display: block;}

marcphisto · 30-04-2009 11:00am

Can you put it somewhere where it can be seen? It'll be easier to work out whats going wrong that way.

galley · 30-04-2009 11:04am

How's about HERE.

Also meant to say, this is only happening in IE - Firefox, Chrome etc are acting fine.

marcphisto · 30-04-2009 11:30am

Ok,

the first thing is to fix these issues

line 15 column 7 - Error: required attribute "type" not specified
line 15 column 7 - Error: document type does not allow element "style" here
line 70 column 6 - Error: end tag for element "li" which is not open
line 102 column 10 - Error: ID "nav" already defined
line 63 column 10 - Info: ID "nav" first defined here
line 109 column 6 - Error: end tag for element "li" which is not open

Get firebug for firefox here, it'll help you out no end.

galley · 30-04-2009 11:47am

Hiya,

All those issues are fixed, but still the same problem. Sorry, I should have explained, I just threw all that code into the one page to make it a bit easier for others to view everything, I wasn't too concerned with two IDs appearing or the likes

Anyway, all validating fine now, but my problem ain't going anywhere ..!

Here you go

marcphisto · 30-04-2009 1:38pm

Can you put this section of code

<!-- The line below starts the conditional comment --> 
 <!--[if IE]>
  <style type="text/css">
   body {behavior: url(csshover.htc);}
  </style>
 <![endif]--> <!-- This ends the conditional comment --> 
<link href="menu.css" rel="stylesheet" type="text/css" />

above the

</head>

tag.

The page doesn't even open in IE6 for me now.

galley · 30-04-2009 2:23pm

Jesus, sorry about that, it's fixed now. You must think I'm wasting your time. Apologies

Here you go.

marcphisto · 30-04-2009 4:36pm

Sorry, the real world is interfering with my boardsie activities. I'll take a look at it as soon as I can, in the meantime some kind soul may come up with the solution for you.

galley · 30-04-2009 8:04pm

Cheers, I'll keep soldiering away at it anyway

galley · 06-05-2009 1:00pm

Hiya Marc,

I said I'd get back to let you know about my menu problem. I have it sorted, but I had to turn to javascript to sort out the problem. Not too impressed with having to do that, but c'est la vie. This also sorted out the positioning problem I had with the full CSS menu (I had to give each description line a fixed position, not so great if you have to add a new menu item)

Here's the original menu (Full CSS)

Here's the new one with some Javascript help

Cheers for the helping me out

Hover problem with Menu

Comments