CSS - Drop Down Menu not appearing in later versions of IE, Firefox, and Safari

HTML & CSS
1

Hey,

I spent a huge amount of time setting up css code to create drop-down menus in one version of IE (an older version) only to find out that it doesn’t work in later versions like IE 8, Firefox and Safari. Here’s the web link: http://www.kingedwardavenue.com/. The following is the code. Any suggestions? I have a launch date of this Thursday and there’s a media release going out. I’m go to be up all night tomorrow night if I can’t figure this out. Thx. (Marc)

/* header menu */

/Positions the menu and provides font/

#header-content ul {
position: absolute;
right: -5px; top: 70px;
font: bolder 1.3em ‘Trebuchet MS’, sans-serif;
color: #FFF;
list-style: none;
margin: 0; padding: 0;
}

#header-content ul {
float: left;
}

/Makes the menu horizontal instead of vertical/

#header-content li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

/Design of the boxes around each link/

#header-content li a {
float: left;
display: block;
padding: 3px 12px;
color: #fff;
background-color: #333;
text-decoration: none;
border-right: 1px solid #272727;
}

#header-content li li a {
width: inherit;
}

#header-content li a:hover {
background: #65944A;
color: #fff;
padding: 3px 12px;
border-right: 1px solid #65944A;
}

#header-content li a#current {
background: #65944A;
color: #fff;
}

#header-content li.hover,
#header-content li:hover {
position: relative;
z-index: 599;
cursor: default;
}

/To make the drop downs disappear/

#header-content ul.sub1 {
font: bolder 1em ‘Trebuchet MS’, sans-serif;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}

ul.sub1 ul li {
float: none;
padding: 20px 20px;
}

ul.sub1 ul ul {
top: 1px;
left: 99%;
}

/Allows for the text to drop down under each tab/

#header-content li:hover > ul {
visibility: visible;
}

ul.sub1 a {
float: left;
display: block;
width: 160px;
}

2

Nesting a document in a document? Yeah, that causes screwy things. The page needs to be chucked through the W3c validator and fixed. There’s also a lot of CSS that, hm, I can’t even read it.

3

I just went to his page, every <li> is still floated of the menu (not unfloated) nor has he designated a width for the <li> (or <ul)

He chose option C :rofl:

4

Hm, actually I’m not sure it it is… it’s absolutely positioned and then top: 100% (so I guess that sends it off the bottom of the page). So, I think he could have set a width desired on the sub ul instead.

5

Ah, well then nevermind ;). That’s unusual.

6

We are glad to help :).
Instead of setting a width on the submenu, I’d be inclined to just set float:none for the dropdown <li>'s that way they automatically expand 100% of the <ul>s width (and that would be able to expand to the longest item) :slight_smile:

7

Thanks to both Stommee Poes and RyanReese. I’m not a web designer myself, so it was a lot of work to throw this volunteer site together. You just volunteered some time towards my neighbourhood’s cause. Thanks for your help - you saved me a whole lot of time.

Marc

8

Hey!

Thanks for the help on that. I thought I was going to be at it for weeks. Glad to see it was a simple fix and nothing to do with the CSS.

I just have one other minor problem, now. The drop-down menu width is uneven in Firefox and later versions of IE. Any ideas about that?

Marc

9

Your sub li’s are still floated, and floats shrink-wrap to their content width.

You could probably most easily fix this by setting all the sub li’s to whatever width you want. Normally i set them to 100%, but that’s because I set a width on my submenus, but yours are already stretching across the page (you can’t see them tho). So you won’t want 100%.

You have some CSS that’s not doing anything. Be aware that if you set someone to position: absolute, then saying anything like float: left on them later is ignored. The element remains absolutely positioned until you undo it (by stating some other position like relative or static). So, anywhere you have someone both abso-positioned AND floated, know that everyone is ignoring the float.

10

Hi, your HTML is invalid, for one thing, the only legal children of <ul>'s are <li> (though you can have other stuff in that) and 2, you nest the dropdown illegally.

It’s always best to code for good borwsers (FF/saffy) and then code for IE (if needed)

<!-- Menu Tabs -->

			<ul>
					<li><a href="index.htm" id="current">Home</a></li>
					<li><a href="aboutus_e.htm">About&nbsp;Us</a></li>				
						<ul class="sub1">
							<li><a href="executive_e.htm" id="subs">Executive</a></li>
							<li><a href="purpose_e.htm">Purpose</a></li>
							<li><a href="achievements_e.htm">Achievements</a></li>
							<li><a href="history_e.htm">History</a></li>
						</ul>
					<li><a href="meetings_e.htm">Meetings</a></li>

That should look something like this

<!-- Menu Tabs -->

			<ul>
					<li><a href="index.htm" id="current">Home</a></li>
					<li><a href="aboutus_e.htm">About&nbsp;Us</a>				
						<ul class="sub1">
							<li><a href="executive_e.htm" id="subs">Executive</a></li>
							<li><a href="purpose_e.htm">Purpose</a></li>
							<li><a href="achievements_e.htm">Achievements</a></li>
							<li><a href="history_e.htm">History</a></li>
						</ul>
</li>
					<li><a href="meetings_e.htm">Meetings</a></li>

Notice how I renested the <ul> to be within that one <li> :).

11

The ul is 100% of the page tho.