CSS horizontal drop down menu

[kennykaz]

Hello,

I've created a css horizontal drop down menu that seemingly worked fine in across all browsers. That is until I added it to the WP blog. The portion of the drop down that extends into the content area is hidden, or opens underneath, the page elemnets in IE only.

I've tried adding/changing z-index, but that didn't work.

Any help surely appreciated.

Kennykaz

[KDLA]

Put "clear: both" for your content area.

[kennykaz]

Thank you for your help. Unfortunatley, it didn't work.

Here's the address: http://www.lafcsoccer.com/Blog/?p=25

You'll notice the expanded drop down is hidden when it drops down into the content area.

Thanks again for your interest!

Kennykaz

[KDLA]

In IE6, it doesn't work at all (as in the dropdown appearing).

[kennykaz]

It works fine on all other pages except on the blog site. I have a "wrapper" div holding my background content, however, the div holder for some content on top of that is the problem. Again, only on the page in my WP blog.

[opifex]

one problem you have is that 2 divs have the same id (lines 89 & 90)


<div id="content">
<div id="content">


css errors: _display doesn't exist ...display:inline;

#nav li { float:left; list-style:none; display:inline; position:relative; }
and others... remember the "#" before colors!, and validate to see the rest!


this css menu will NOT work in ie6 and older. you have to hack in tables with something like this



<li id="nav-02"><a href="#"><span>Teams</span></a>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Boys.php"><span>Boys</span></a></li>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Girls.php"><span>Girls</span></a></li>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Special.php"><span>Special Olympics</span></a></li>
<li><a href="http://ussda.demosphere.com/teams/10876653/10994730-10876696/TEAM.html" target="_blank"><span>Academy Development U16</span></a></li>
<li><a href="http://ussda.demosphere.com/teams/10876653/10995144-10876699/TEAM.html" target="_blank"><span>Academy Development U18</span></a></li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul></li>


and style the tables something like this

#nav table {
position:absolute;
top:0; left:0;
border-collapse:collapse;
}

also to avoid confusion it might be a good idea to change the #nav-20, #nav-02, #nav-02,

etc. to classes (i.e. .nav-20)

clean up your xhtml!
meta and link tags haved to be closed in xhtml like this
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.lafcsoccer.com/Blog/?feed=rss2" />



and there are a few more errors further down the page in your content.

did you try validating your page?

[kennykaz]

I appreciate all your notes. I spent many hours this morning addressing them, however, the problem still persists. The dropdown works fine on all other pages other than on the Word Press pages. There is, of course, much php code on those pages and it seems the problem is within the content divs.

[opifex]

ok...
but checking right now i still see the the same errors and no attempts at any changes on http://www.lafcsoccer.com/Blog/?p=25
...????

[opifex]

my mistake .... sorry

<li id="nav-02"><a href="#"><span>Teams</span></a>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Boys.php"><span>Boys</span></a></li>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Girls.php"><span>Girls</span></a></li>
<li><a href="http://www.lafcsoccer.com/docs/Teams/Special.php"><span>Special Olympics</span></a></li>
<li><a href="http://ussda.demosphere.com/teams/10876653/10994730-10876696/TEAM.html" target="_blank"><span>Academy Development U16</span></a></li>
<li><a href="http://ussda.demosphere.com/teams/10876653/10995144-10876699/TEAM.html" target="_blank"><span>Academy Development U18</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
the final if was wrong!!!