CSS - Hover State Persists (ie Bug)

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 have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

hi all,

Code:

<ul class="sessionlist">
<li class="session_event">
<label class="evinfo">
<b>available places: 1</b>
</label>
<br>
<label class="evinfo">
<b>session capacity: 1</b>
</label>
</div>
<br>
<label class="evinfo">Click to select</label>
</li>
<li class="session_event current">
<label class="evinfo">
<b>available places: 1</b>
</label>
<br>
<label class="evinfo">
<b>session capacity: 1</b>
</label>
</div>
<br>
<label class="evinfo">Click to select</label>
</li>

I have managed to get the color of the text in these labels by using:

Code:

ul.sessionlist li:hover .evinfo{
	color: #662d91 !important;
}

My question is.. how do i change the color of the text for the labels in selected_session current?


Its doing my head in and I can't figure it out...

Probably really simple for you guru's though.

Ben

ps, i know the html for this is invalid.. I've chopped out a load of code to leave only the relevant stuff and have probably missed a few things.

Hi,

I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please?

HTML
Code:

<ul id="nav">
          <li id="list1"><a href="#"><span>Home</span></a></li>
          <li id="list2"><a href="#"><span>Special Offer</span></a></li>
          <li id="list3"><a href="#"><span>Help</span></a></li>
          <li id="list4"><a href="#"><span>Delivery Information</span></a></li>
          <li id="list5"><a href="#"><span>Technical</span></a></li>
          <li id="list6"><a href="#"><span>About Us</span></a></li>
          <li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>

CSS

Code:

* { margin: 0px; padding: 0px; }
 
#nav {
      background: url(nav.png);
      height: 38px;
      width: 960px;
      margin: 0 auto;
}
 
#nav span {
     display: none;
}

#nav li {
    list-style-type: none;
    float: left;
}
 
#nav a {
    height: 38px;
    display: block;
}

#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }



#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}
 
#list2 a:hover {
      background: url(nav.png) -114px -38px no-repeat;
}
 
#list3 a:hover {
      background: url(nav.png) -278px -38px no-repeat;
}
 
#list4 a:hover {
      background: url(nav.png) -390px -38px no-repeat;
}
 
#list5 a:hover {
      background: url(nav.png) -596px -38px no-repeat;
}
 
#list6 a:hover {
      background: url(nav.png) -726px -38px no-repeat;
}
 
#list7 a:hover {
      background: url(nav.png) -848px -38px no-repeat;
}

Hello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below.

Many thanks in advance!


Website: http://174.120.172.92/~techsol/

CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen


My navigation code:

Code:

<!-- nav start -->
<ul id="nav">
    <li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
    <li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
    <li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
    <li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
    <li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
    <li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
    <li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
    <li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->

My navigation CSS Styles:

Code:

#nav{
	width:542px;
	position:absolute;
	top:134px;
	left:320px;
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
}
#nav li{
	float:left;
	margin:0 0 5px;
	height:40px;
	overflow:hidden;
}
#nav a{
	background:url(uploads/template/bg-nav.jpg) no-repeat;
	text-indent:-9999px;
	display:block;
	overflow:hidden;
	height:40px;
}
#nav .excursions a{
	width:122px;
	margin:0 8px 0 0;
}
#nav .live a{
	width:197px;
	background-position:-130px 0;
	margin:0 3px 0 0;
}
#nav .restaurants a{
	width:130px;
	margin:0 5px 0 0;
	background-position:-330px 0;
}
#nav .top a{
	width:77px;
	background-position:-465px 0;
}
#nav .hostoric a{
	width:173px;
	background-position:0 -45px;
	margin:0 9px 0 0;
}
#nav .shopping a{
	width:110px;
	background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}

#nav .days a{
	width:103px;
	background-position:-300px -45px;
}
#nav .access a{
	width:126px;
	background-position:-415px -45px;
}

#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}

#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}

I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.

I'm including my html and css below and would appreciate any help.

Thanks, Keith Silva

CSS:

textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
button{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
/*table{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}*/
caption{
font-size: 1.5em;
}
.add{
font-size: 0.6em;
text-align: right;
}
.frm_tbl{
border-spacing: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: Navy;
}
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/*#navlist li:target*/

#mail_frm #mail_nav a,
#loc_frm #loc_nav a,
#other_frm #other_nav a{
background: white;
border-bottom: 1px solid white;
}
#mail_frm{display: none}
#mail_frm:target{display: block}

#loc_frm{display: none}
#loc_frm:target{display: block}

#other_frm{display: none}
#other_frm:target{display: block}

HTML:

//
#include settings
#cgivar id
#cgitextvar notes
#cgitextvar directions
#if @id != ""
//edit existing record
#sql load select * from tbl_org where org_id = @id
#else
//new record
#sqlblankrow tbl_org
#endif
<form method="POST" target="_self" name="org_form">
#formtarget org_save
<div id="navcontainer">
<ul id="navlist">
<li id="mail_nav"><a href="#mail_frm">Mail</a></li>
<li id="loc_nav"><a href="#loc_frm">Location</a></li>
<li id="other_nav"><a href="#other_frm">Other</a></li>
</ul>
</div>
<table id="mail_frm" class="frm_tbl" border="0">
<tr>
<td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td>
<td>Type<br><select name="type" size="1" class="">
#optionlist selected=@type
#options
muni Municipality
state State
discharger Discharger
consultant Consultant
law_firm Law Firm
dischgr_assoc Discharger Assoc
elected Elected Official
lab Laboratory
public Public
academia Academia
tribe Tribe
other Other
</select></td>
</tr>
<tr>
<td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td>
<td>Region<br><select name="region" size="1" class="">
#optionlist selected=@region
#options
none None
north AZ-North
central AZ-Central
south AZ-South
rb1 CA-North Coast(1)
rb2 CA-San Francisco Bay(2)
rb3 CA-Central Coast(3)
rb4 CA-Los Angeles(4)
rb5r CA-Central Valley North(5r)
rb5s CA-Central Valley(5s)
rb5f CA-Central Valley South(5f)
rb6 CA-Lahontan(6)
rb7 CA-Palm Desert(7)
rb8 CA-Santa Ana(8)
rb9 CA-San Diego(9)
</select></td>
</tr>
<tr>
<td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td>
<td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td>
</tr>
<tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr>
<tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr>
<tr>
<td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td>
<td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td>
<td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td>
</tr>
</table>
<table id="loc_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr>
<tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr>
<tr>
<td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td>
<td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td>
</tr>
<tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60">
#showtext ./directions/org_@org_id
#+ </textarea></td>
</tr>
</table>
<table id="other_frm" class="frm_tbl" border="0">
<tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr>
<tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr>
<tr>
<td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td>
<td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td>
</tr>
<tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr>
<tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50">
#showtext ./notes/org_@org_id
#+ </textarea></td>
<td><input name="selected" type="checkbox" value="y" title="">Select<br><br>
<input name="archive" type="checkbox" value="y" title="">Archive</td>
</tr>
</table><br>
org_id&nbsp;<input name="org_id" type="text" size="8" value="@org_id" title="">
<button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button>
<button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button>
</form>

Hello:
I would like to have a big font size of title on my web site for search engine optimuzation purpose, I wrap the title with a H1, then I define H1 in css as
FONT-WEIGHT: bold;
FONT-SIZE: 34px;
COLOR: #000000;

in other place I also have
A:hover {COLOR: #6460AD; TEXT-DECORATION: underline;

the title I put in is a hyper link, so when the mouse hovers on the title, the title shown as underlined, I want it to be TEXT-DECORATION: none

I don't know the syntax in H1 definetion to disable the underline

http://www.knowledge2work.com/testing/test.htm is a link to a menu that I have created. Essentially what I want to happen is that the mouseover on the submenu changes the background color and the text color as well. I have done this using td:hover and ids and it works just fine in Firefox but not at all in IE. Why is this?

I don't know is it done before or not but i made it ,, i got rid of the onmouseover:crab tags but i think if you announce it as harmless I have use it again because I'll to write three times more code to get what i want with that hover thing.
both functional in ie and ff
css
Code:

.ortadiv:link {background-color:#EFEFEF;}
* html .ortadiv {background-color:#EFEFEF;} /*hack*/
.ortadiv:hover {background-color:white; cursor:default}

html -(my code looks like that)
Code:

<a class="ortadiv" href="#"><span><h5></h5></span></a>

(it doesn't validates !)
my main concern is about my headers , because when i use my css-hack-hover they becomes links with "#" . Is it affects search-engine things ?

edit: I decided to not to use it because of my validating concerns

I want to change the color of an <a> when a list element is hovered over, using CSS. Is this possible? Or do I need to resort to Javascript?

Code:

<style>
a { color: red; }
#menu ul li:hover { background: red; color: white; }
</style>

<div id="menu">
<ul>
<li><a href="home.html">Home</li>
</ul>

I can do a change to:
#menu ul li:hover, #menu ul a:hover { background: red; color: white; }
but the anchor won't change color on the li:hover, so it looks red on red.

Hi,

I have found a nice feature on this website;

click here

When you mouse over grey - orange images another div comes out.

What this is called?

Is there any example code that I can work on?

Thanks.

Thanks for taking the time to read my question.

This works in FF but not IE6. What do I need to change to make it work

I have borders around my images which are links and I want the border color to change on hover

HTML
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>

CSS for container
Code:

img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}

CSS for hover
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>
<a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a>
<a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a>
<a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a>

Thanks,

Brad

I have the following css
Code:

#navigation li {
	display: inline;
	background: url(Images/greenbg.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}

for the following html
Code:

<div id="navigation">
<ul>
<li><a href=""><span>Menu1</span></a></li>
<li><a href=""><span>Menu2</span></a></li>
<li><a href=""><span>Menu3</span></a></li>
<li><a href=""><span>Menu4</span></a></li>
<li><a href=""><span>Menu5</span></a></li>
</ul>
</div>

<br style="clear: both" />

and I can't figure out how to get the background to change when I hover. Anyone have any ideas? I tried this to no avail
Code:

#navigation a:hover li {
	display: inline;
	background: url(Images/greenbghover.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}

I know that td:hover isn't supported by all browsers but it is displaying some quirky behavior:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My site</title>
    <style type="text/css">
      #level0 table { 
        border-spacing: 0;
        border-collapse: collapse; } /* end #level0 table */
      #level0 table td { padding: 0; }
      #level0 #links_table { 
        text-align: right;
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        height: 242px;
        width: 265px; } /* end #level0 #links_table */
      #level0 #links_table td { 
        border-top: 1px solid #f1f1f1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #f1f1f1; } /* end #level0 #links_table td */
      #level0 #links_table td:hover { 
        border: 1px solid #000000;
        border-right: 0; } /* end #level0 #links_table td:hover */
      #level0 #links_table a { padding-right: 1em; }
      #level0 #rotating_image img {
        vertical-align: top;
        border: 1px solid #000000;
        border-left: 0; } /* end #level0 #rotating_image */
    </style>
  </head>
  <body>
    <div id="level0">
      <table id="main_table">
        <tr>
          <td>
            <table id="links_table">
              <tr><td><a href="#">Link 1</a></td></tr>
              <tr><td><a href="#">Link 2</a></td></tr>
              <tr><td><a href="#">Link 3</a></td></tr>
              <tr><td><a href="#">Link 4</a></td></tr>
              <tr><td><a href="#">Link 5</a></td></tr>
              <tr><td><a href="#">Link 6</a></td></tr>
              <tr><td><a href="#">Link 7</a></td></tr>
              <tr><td><a href="#">Link 8</a></td></tr>
            </table>
          </td>
          <td id="rotating_image"><img src="my_image.gif" alt=""></td>
        </tr>
      </table>
    </div>
  </body>
</html>

When I hover over the first cell, the top and bottom borders turns black but not the left, and all the right borders disappear. When I hover over the other cells, only the bottom border turns black.

What I am trying to accomplish is when a table cell is moused over, the top, bottom, and left border of that cell turns from gray to black and the right border which is currently black turns white.