PDA

View Full Version : Resolved CSS drop-downs work in IE but NOT in Firefox or Safari



Tuesday
Jan 22nd, 2010, 01:58 AM
I have no idea. I searched and searched for info on this issue but I can only find it on the reverse scenario where drop-downs won't work in IE, etc.

Here's the css:



#menu {
position: relative;
top: -70px;
width: 180px;
height: 208px;
background-color: white;
margin-left: 60px;
z-index: 7000;
}

#menu ul {
list-style-type: none;
}

#menu ul li {
padding-right: 10px;
text-align: right;
display: block;
height: 35px;
padding-top: 25px;
}

#menu ul li a {
color: #7D181B;
font-size:16px;
letter-spacing: 0px;
font-family: "Lucida Console", Monaco, monospace;
}

#menu ul ul {
position: relative;
top: -23px;
left: 180px;
display: none;
background-color: white;
width: 280px;
}

#menu ul ul li {
height: 25px;
padding: 0px;
margin: 0px;
}

#menu ul li:hover ul {
position: relative;
display: block;
background-color: #7D181B;
}


The html is like this:



<div id="menu">
<ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li></ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
</ul>
</div>



Anyone know what I'm doing wrong?

Excavator
Jan 22nd, 2010, 02:54 AM
Hello Tuesday,
Your unordered list is not formatted correctly - run your code through the validator and fix the errors. See the links in my sig about validating.


The snippets you've quoted here don't do any sort of dropdown in any browser.
We'll need more information than what you've given us. A link to the test site is always best but, if you need to post code here, give it all to us so we can make sure you're using a DocType and your page is layed out right.

Tuesday
Jan 22nd, 2010, 03:17 AM
Hi Excavator,

I see what I've done wrong -- I've forgotten to put the sub-unordered-list inside a list item. I knew it had to be something dumb, although it does work in IE for some reason.

Thanks for your help (it's valid now, XHTML 1.0 Transitional).

Excavator
Jan 22nd, 2010, 03:27 AM
(it's valid now, XHTML 1.0 Transitional).

:thumbsup: