/    Sign up×
Community /Pin to ProfileBookmark

Newbie Menu Question

Menus aren’t showing up when li:hover. Can’t see my mistake. Any help?

P.S. can anyone tell me how to get that interesting “slide” effect so the menus slide down rather than just appear…..

[code]
body {
behaviour: url(../csshover.htc);
margin:-0;
padding:0;
font-size: 100%;
font-family: verdana,arial,sans-serif;
}

#menu {
background: #000;
padding: 7px 7px 7px 0;
}

#menu ul {
list-style: none;
margin:0;
padding:0;
}

#menu li {
position:relative;
float: left;
padding: 0 25px;
}

#menu li a {
color: #eeffff;
font-size: 0.8em;
}

#menu ul ul {
position:absolute;
margin:0;
padding:0;
display: none;
}

#menu ul li:hover ul {
display:block;
}
[/code]

[code]
<div id=”menu”>
<ul>
<li><a href=”#”>Menu #1</a></li>
<ul>
<li><a href=”#”>Sub #1 Item #1</a></li>
<li><a href=”#”>Sub #1 Item #2</a></li>
<li><a href=”#”>Sub #1 Item #3</a></li>
</ul>
</ul>

<ul>
<li><a href=”#”>Menu #2</a></li>
<ul>
<li><a href=”#”>Sub #2 Item #1</a></li>
<li><a href=”#”>Sub #2 Item #2</a></li>
<li><a href=”#”>Sub #2 Item #3</a></li>
</ul>
</ul>

<ul>
<li><a href=”#”>Menu #3</a></li>
<ul>
<li><a href=”#”>Sub #3 Item #1</a></li>
<li><a href=”#”>Sub #3 Item #2</a></li>
<li><a href=”#”>Sub #3 Item #3</a></li>
</ul>
</ul>

<ul>
<li><a href=”#”>Menu #4</a></li>
<ul>
<li><a href=”#”>Sub #4 Item #1</a></li>
<li><a href=”#”>Sub #4 Item #2</a></li>
<li><a href=”#”>Sub #4 Item #3</a></li>
</ul>
</ul>

<br style=”clear: both;”>
</div>
[/code]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@aj_nscauthorMay 12.2006 — Never mind, that was really dumb. I know, I have the closing li in the wrong place. If anyone has an answer to my "slide" question instead of "appear", though, I'd appreciate it.
Copy linkTweet thisAlerts:
@drhowarddrfineMay 12.2006 — Careful. :hover doesn't work on <li> in IE.
Copy linkTweet thisAlerts:
@machineghostMay 12.2006 — drhowarddrfine is right, but :hover does work on <a>'s in IE, so you can define something like:

li a:hover{}

As for the slide effect, maybe try using this:

http://developer.yahoo.com/yui/animation/
Copy linkTweet thisAlerts:
@aj_nscauthorMay 12.2006 — Apologies, I meant left out the fact that I was using csshover.htc
×

Success!

Help @aj_nsc 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 5.17,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...