[RESOLVED] Nav bar a:hover not working on first link only

[Steph84]

Hello

I have been tweaking the CSS of a site I have almost finished and suddenly the nav bar has a glitch. The first link on the top level (it is a drop-down menu) is not changing from white to yellow when you hover on it. All the other links are working and I'm sure they were all working before yesterday. I have no idea what I may have changed that has caused this. Please help, I really need to finish it this weekend and I just can't figure it out!

It is only Firefox that is having a problem with this. It works fine in IE (v8). However, I developed it for Firefox and it was working fine until yesterday. It makes no sense to me whatsoever!

Here is my html (the CSS is below):

<div id="menu_wrapper">

<div class="menu">

<ul>

<li><a class="hide" href="industry.html">Industry Services</a>

<!--[if lte IE 6]>
<a href="industry.html">Industry Services
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="studio.html">Recording Studio</a></li>
	<li><a href="mixmaster.html">Mixing &amp; Mastering</a></li>
	<li><a href="voiceover.html">Voiceover &amp; Spoken Word</a></li>
	<li><a href="multimsound.html">Sound for Multimedia</a></li>
	<li><a href="event.html">Event Facilities</a></li>
	<li><a href="av.html">A/V Installation</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="education.html">Education Services</a>

<!--[if lte IE 6]>
<a href="education.html">Education Services
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="instrumental.html">Instrumental Tuition</a></li>
	<li><a href="musictech.html">Music Technology Tuition</a></li>
	<li><a href="schoolshow.html">School Show Recording</a></li>
	<li><a href="assessment.html">Assessment Recording</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="consumer.html">Consumer Services</a>

<!--[if lte IE 6]>
<a href="consumer.html">Consumer Services
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="digitransfer.html">Digital Transfer</a></li>
	<li><a href="homestudio.html">Home Studio Doctor</a></li>
	<li><a href="rehearsals.html">Rehearsal Recordings</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

</ul>

</div>

<div class="menu2">

<ul>

<li><a class="hide" href="contact.html">Contact us</a>

<!--[if lte IE 6]>
<a href="contact.html">Contact us</a>
<table><tr><td>
<![endif]-->

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="links.html">Links</a>

<!--[if lte IE 6]>
<a href="links.html">Links</a>
<table><tr><td>
<![endif]-->

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="home.html">Home</a>

<!--[if lte IE 6]>
<a href="home.html">Home
<table><tr><td>
<![endif]-->

	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

</li>

</ul>

</div>

</div>

and my CSS:

#menu_wrapper {
position:relative; 
top:0; 
left:0;
width:64em;
float:left;
z-index:3;
}

/* common styling */
.menu
{
position:relative;
top:100px;
left:10px;
width:37.3em; 
height:2.8em;
z-index:3;
float:left;
background:#cb3001 url('images/navbar1a.gif') no-repeat;
}
.menu ul li a, .menu ul li a:visited 
{
display:block;
text-decoration:none;
font-size:0.9em;
color:#ffffff;
width:12.2em; 
height:3.2em; 
text-align:center;  
line-height:3em;
padding:0 10px 0 10px;
}
.menu ul 
{
padding:0; 
margin:0; 
list-style:none;
}
.menu ul li 
{
float:left; 
position:relative;
width:12.2em;
}
.menu ul li ul 
{
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a 
{
color:#ffff66; 
}
.menu ul li:hover ul 
{
display:block;
background-color:#cb3001;
position:relative; 
top:0; 
left:0;
}
.menu ul li:hover ul li a.hide 
{ 
color:#ffffff;
}
.menu ul li:hover ul li:hover a.hide 
{
color:#ffffff;
}
.menu ul li:hover ul li ul 
{
display: none;
}
.menu ul li:hover ul li a 
{
display:block;
background-color:#cb3001;
color:#ffffff;
}
.menu ul li:hover ul li a:hover 
{
color:#ffff66;
}
.menu ul li:hover ul li:hover ul 
{
display:block; 
background-color:#cb3001;
position:absolute;
left:auto; 
top:0;
}
.menu ul li:hover ul li:hover ul.left 
{
left:-999em;
}


/* common styling */
.menu2
{
position:relative; 
top:100px; 
left:10px; 
width:25em; 
height:2.8em; 
z-index:3;
float:left;
background:#cb3001 url('images/navbar2a.gif') no-repeat;
}
.menu2 ul li a, .menu ul li a:visited 
{
display:block;
text-decoration:none;
font-size:0.9em;
color:#ffffff;
height:3.2em; 
text-align:center;  
line-height:3em;
padding:0 10px 0 10px;
}
.menu2 ul 
{
padding:0; 
margin:0; 
list-style:none;
}
.menu2 ul li 
{
float:left; 
position:relative;
width:8em;
}
.menu2 ul li ul 
{
display:none;
font-size:0.9em;
}

/* specific to non IE browsers */
.menu2 ul li:hover a 
{
color:#ffff66; 
}
.menu2 ul li:hover ul 
{
display:block;
background-color:#cb3001;
position:relative; 
top:0; 
left:0;
}
.menu2 ul li:hover ul li a.hide 
{ 
color:#ffffff;
}
.menu2 ul li:hover ul li:hover a.hide 
{
color:#ffffff;
}
.menu2 ul li:hover ul li ul 
{
display: none;
}
.menu2 ul li:hover ul li a 
{
display:block;
background-color:#cb3001;
color:#ffffff;
}
.menu2 ul li:hover ul li a:hover 
{
color:#ffff66;
}
.menu2 ul li:hover ul li:hover ul 
{
display:block; 
background-color:#cb3001;
position:absolute; 
left:auto; 
top:0;
}
.menu2 ul li:hover ul li:hover ul.left 
{
left:-999em;
}

By the way, if you are wondering why I have used two separate Divs and Classes for my nav bar, it is because I wanted the first three menu items to be of equal width and the last three menu items to be of equal width (but not as wide as the first three). Splitting the menu into two Divs and Classes and putting a wrapper div around them was the only way I could get this to work. If any one can suggest a better way, that would also be a great help. My priority now though is the Firefox hover bug.

Thank you in advance!

[Steph84]

I have spent some time searching forums for similar problems - and ways to fix them - and came across this piece of advice:

I'd guess that your css file got lost on the way to your browser, or got corrupted in some way (and then the corrupted version got cached and keeps getting used on your local machine).

As I am loading the web page locally, I thought this may be worth a shot. I deleted my browser history, cache etc and it now works.

All that time spent trying to figure out what was wrong with my validated CSS! grrrr. At least it's working though.