PDA

View Full Version : Resolved Dropdown menu not working in Firefox



airickjay
Sep 22nd, 2009, 08:35 PM
I am trying to create a dropdown menu in only CSS. I have it working in IE 7, but Firefox doesn't like it one bit. Here is the XHTML:


<div id="menubar">
<ul>
<li><a href="index.html">Home.Go()&nbsp;|&nbsp;</a></li>
</ul>
<ul>
<li><a href="about.html">About.Us(Info)&nbsp;|&nbsp;</a></li>
</ul>
<ul>
<li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a></li>
<ul>
<li><a href="arcgis.html">ArcGIS Projects</a></li>
<li><a href="vbdotnet.html">VB.NET Projects</a></li>
<li><a href="joomla.html">Joomla! Projects</a></li>
</ul>
</ul>
<ul>
<li><a href="contact.html">Contact(Us)</a></li>
</ul>
</div>

And here is the CSS for the menu bar:


div#menubar {
margin: 0 auto;
background-color: #000000;
color: #FFFFFF;
font-size: 11px;
letter-spacing: 2px;
padding: 4px;
width: 594px;
height: 15px;
}

#menubar a {
color: #FFFFFF;
text-decoration: none;
margin-top: 0px;
}

#menubar a:hover {
font-weight: bold;
}

#menubar ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menubar li {
position: relative;
}

div#menubar ul li:hover ul {
visibility: visible;
padding: 5px;
background-color: #666666;
width: 145px;
text-align: left;
}

div#menubar ul ul{
visibility: hidden;
}

The dropdown menu will not appear.

Any assistance in sorting this out would be GREATLY appreciated.

Thanks in advance!

rmedek
Sep 22nd, 2009, 08:42 PM
Validating your HTML would have caught this. You have this code:



<ul>
<li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a></li>
<ul>
<li><a href="arcgis.html">ArcGIS Projects</a></li>
<li><a href="vbdotnet.html">VB.NET Projects</a></li>
<li><a href="joomla.html">Joomla! Projects</a></li>
</ul>
</ul>


…which is not only invalid but your CSS shouldn't be working — li:hover ul wouldn't affect anything because there is no UL inside a LI.

Try with this:


<ul>
<li><a href="projects.html">Projects.Create()&nbsp;|&nbsp;</a>
<ul>
<li><a href="arcgis.html">ArcGIS Projects</a></li>
<li><a href="vbdotnet.html">VB.NET Projects</a></li>
<li><a href="joomla.html">Joomla! Projects</a></li>
</ul>
</li>
</ul>

You'll also have greater luck using display:none/block versus visibility:hidden/visible since the first way won't take up any layout.

airickjay
Sep 22nd, 2009, 08:46 PM
awesome, thanks for the quick response.

clunk.werclick
Sep 22nd, 2009, 08:47 PM
It's working here for me in Firefox - not sure if it looks how you intend:

airickjay
Sep 22nd, 2009, 09:08 PM
The dropdown wouldn't function, but I guess that was because my tags were nested incorrectly. My next issue it seems is that in Firefox, when the dropdown menu comes down, it moves all of the text below it rather than covering it up. This works fine in IE. Any ideas? I played with the z-indices of all the involved elements, but it doesn't seem to make a difference.

airickjay
Sep 22nd, 2009, 09:49 PM
Figured it out, had to add an absolute position to the dropdown! :thumbsup:

drhowarddrfine
Sep 23rd, 2009, 04:26 AM
Quit using IE as a reference for how things should work and you won't have so many problems. Always, always use any other browser for your initial test. THEN look to see if/when IE screws things up. We always hack IE, not Firefox.