/    Sign up×
Community /Pin to ProfileBookmark

CSS horizontal drop down menu

Copy linkTweet thisAlerts:
Sep 25.2008

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

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLASep 25.2008 — Put "clear: both" for your content area.
Copy linkTweet thisAlerts:
@kennykazauthorSep 25.2008 — 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
Copy linkTweet thisAlerts:
@KDLASep 25.2008 — In IE6, it doesn't work at all (as in the dropdown appearing).
Copy linkTweet thisAlerts:
@kennykazauthorSep 25.2008 — 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.
Copy linkTweet thisAlerts:
@opifexSep 27.2008 — one problem you have is that 2 divs have the same id (lines 89 & 90)

[code=html]
<div id="content">
<div id="content">
[/code]

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

[CODE]#nav li { float:left; list-style:none; display:inline; position:relative; }[/CODE]
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

[code=html]

<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>[/code]


and style the tables something like this

[CODE]#nav table {
position:absolute;
top:0; left:0;
border-collapse:collapse;
}[/CODE]

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
[code=html]<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" />[/code]



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

did you try validating your page?
Copy linkTweet thisAlerts:
@kennykazauthorSep 29.2008 — 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.
Copy linkTweet thisAlerts:
@opifexSep 29.2008 — 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

...????
Copy linkTweet thisAlerts:
@opifexSep 29.2008 — my mistake .... sorry

[code=html] <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]-->[/code]
the final if was wrong!!!
×

Success!

Help @kennykaz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...