CSS - Css Hover State Issue (hierarchy Maybe?)

I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet).

I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state.

I don't really want to post the link to the test site itself if I don't have to for client privacy.

Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work.

I don't even need the javascript, I just need it to work. I've experimented with javascript and without.

This is the code I am using:

javascript:
Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>

HTML Markup:

Code:

<div id="nav">
	<ul id="menu">		
		<li><a href="index.php" class="home"></a></li>
		<li><a href="link" class="tour"></a></li>
		<li><a href="link" class="events"></a>
			<ul class="drop">
				<li><a href="/events/calendar">Calendar</a></li>
				<li><a href="/events">Ag Science Hall of Fame</a></li>
				<li><a href="/events/tastes">TASTES</a></li>
			</ul>
		</li>
		<li><a href="news" class="news">News</a>
			<ul class="drop">
				<li><a href="link">Legislation</a></li>
				<li><a href="news/latest-news">Latest News</a></li>
				<li><a href="/news/newsletter">Newsletter</a></li>
				<li><a href="news/in-the-media">In the Media</a></li>
			</ul>
		</li>
		<li><a href="link"></a></li>
		<li><a href="link"></a></li>
	</ul>
</div>

Menu CSS:

Code:

#nav {
position: relative;
	float:left;
	width:940px;
	height:35px;
	z-index: 9;
	background: #fff;
		}	
		
#menu, #menu ul {
position: relative;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:455px;
	z-index: 9;
	}
	
#menu ul.drop {
	background:#520006;
/*	padding:10px;*/
	width:inherit;
	clear:both;
	float:left;
	margin-top:35px;
	z-index: 9;
	}

#menu ul.drop li {
    width: 130px;
	clear:both;
	padding: 5px;
	z-index: 9;
	}
	
#menu ul.drop li:hover {
    background: #c10101;
	z-index: 9;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	z-index: 9;
	}

	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:130px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	z-index: 9;
}

#menu li:hover ul {
	left: auto;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;}


/*SPRITE BACKGROUP POSITIONING*/	
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
	float:left;
	background:url('images/menu.jpg') no-repeat;
	height:35px;
	text-indent:-999999px;
	}
	
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}

#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}

#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}

#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}

#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}

#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}

ul {list-style: none;}

Hi all,

I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start.

At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover.

Here is my test page...

http://www.seattleunderground.co.uk/testmenu.html

and here is the CSS code...

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 100% "Marker Felt", "Comic Sans", sans-serif;
	font-size:15px;
	font-weight:bold;
	}
.menu ul{
	background:#000000;
	height:150px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
        width:150px;
		padding:0px;
		}
	.menu li a{
		background:url("images/BkgButtonUp.png");
		color:#ffffff;
		display:block;
		font-weight:normal;
		line-height:48px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background:url("images/BkgButtonHov.png");
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:url("images/BkgButtonUp.png");
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:150;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url("images/BkgButtonUp.png");
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:150px;
		}
	.menu li:hover li a{
		background:url("images/BkgButtonUp.png");
        color:#ffffff;
		
		}
	.menu li ul a{
		display:block;
		height:48px;
		font-size:15px;
		font-style:"Marker Felt", "Comic Sans", sans-serif;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:center;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:url("images/BkgButtonHov.png");
			border:0px;
			color:#000000;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	

		

Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them.

Thanks v.much.

P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything.

I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things.

www.seattleunderground.co.uk

Best regards,

Ash

I am having trouble with a:hover in I.E , I have a javascript link that is using php to open a browser window. I am unable to use
<a href=""> instead I am using <a onclick=""> .

Everything works well until I test in I.E and the a:hover style is not working. Does anyone know of a fix to this problem?

the css is

a:hover {
text-decoration: underline;
}

I have a website currently up made with cargo. I used a template with thumbnail buttons and added a hover feature. When I added the second row of thumbnails, the hover feature acted funny on only one of the buttons.

aaroncremona.com is the url

When hovering over yakiniku it kicks everything down a row like there isn't room and its being relative.
Anyone have a clue? Is there anything I need to supply for you guys to help me?

http://geoffreyrickaby.com/df-test/

i have a <div class="current-link"> setup on the home link because it's the current page being viewed, however when you scroll over it the red line over it gets brighter because my hover places that image there. How can i fix it so that a current link, and my sub menu when scrolled over don't display the hover?

I'm almost thinking its a if then statement, but i am probably wrong.

Any suggestions?

Please visit this page -

http://www.brooksidetransmission.com

Put your mouse over the "Services" link to reveal a sub menu.

In FF it works fine in that you can access each of the links in the sub menu.

In IE7 though when you move the mouse around the sub menu links the who sub menu disappears.

Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners.

Somewhere in my combining the two messed up the :hover for IE7

Any help would be appreciated.

Tom

Hello,
I am working on a very simple task:

http://www.virtualsheetmusic.com/ztest.htm

I simply want that by passing the mouse pointer over the left cell of the table (i.e. over the "John White" name) a yellow border must appear. If you try, it works great with FireFox, Safari and IE 7.x, but it doesn't with IE 6.x. Any idea?

Thank you very much for any thoughts.

Best,

Fab.

Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work.

Here it is:

http://www.jimandkris.com/test/verticalpopout.html

When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over.

I'm shooting for something like this:

http://sperling.com/examples/menuv/

The *html hack isn't fixing it like I hoped. What am I missing?

Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that?

Thanks again!

Please look at this page -

http://www.rodstrans.com/menu.html

When you place the mouse over "Services" you will see a nice little (imho) sub menu appear. I have it working well in IE7 & IE8 but there is a small glitch I need some help with. If you carefully place your mouse in the white space between the nav bar and the submenu the submenu disappears. I tried increasing the height of the li but unless I specify a background on the li the increased height does nothing. What I am after is I would like the submenu to be positioned about 5 pixels lower than where it is now, but this issue is preventing me from doing that. In other words, I want the submenu to be seperated from the main nav bar by about 10 pixels, but if I do that then this issue will really be a problem. Thanks. Tom

Hello All,

I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit.

The menu is supposed to appear under the "Select a Tool" text...

029c92a.netsolhost.com/brushes.html

Best Regards,
Colin

I developed a drop down menu for the current site I'm working on. I used several on-line tutorials and the outcome was variable. Everything seems to work great in IE after the hack to fix the :hover elements, but I have never been able to get the drop downs to work in Firefox 3, Chrome, or Safari. Unfortunately I do not have the ability to test in a previous version of Firefox at the moment so I am unsure if it is just a version issue from when the tutorials were written.

The page in progress may be viewed at clcah.org.previewdns.com The specific CSS can be found in clc_common.css under the MENU section. Any insight would be greatly appreciated as I only anticipated trouble with IE.

Hi everyone,

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

As of now the site validates on both css and xhtml 1.0 transitional.

I can list any code if needed.

Thanks for any help

Phil

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.