By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

hover menu using <ul><li>

P: n/a
Attached is some css codes for a website. It has 3 parts: top-bar,
side-bar (on the left) and main-body. The top-bar has a mouseover menu
called top-menu implemented via ul:hover.

When the mouse pointer hovers over the top-menu, the bottom margin of
the top-bar expands downwards. How could I make the hover menu to stack
on top of the main-body, not expanding the bottom margin of the top-bar?

I believe it has something to do with absolute positioning, but I
couldn't figure it out.

--
.~. Might, Courage, Vision. In Linux We Trust.
/ v \ http://www.linux-sxs.org
/( _ )\ Linux 2.4.22-xfs
^ ^ 6:08pm up 3 days 8:35 load average: 1.06 1.03 1.00

<html><head>
<style type="text/css">
#sbr {
border:1px solid yellow;
position:absolute;
margin:0;
width:150px;
}
#sbr h5 {
padding:0;
margin:0;
background:black;
color:white;
}
#sbr p {
padding:0;
margin:0;
}
#topbar {
border:1px solid brown;
margin:0;
}
#topmnu {
margin:0 50px 0 50%;
}
#topmnu ul {
list-style:none;
display:none;
margin:0;
padding:0;
left:0;
top:100%;
width:100px;
border:1px solid red;
border-width:0 0 1px;
}
#topmnu li {
text-align:left;
border:1px solid green;
border-width:1px 1px 0 1px;
}
#topmnu:hover > ul {display:block;}
#topmnu li:hover > ul {display:block;}
#body {
margin:0 0 0 150px;
border-collapse:collapse;
border:1px solid blue;
background:white;
}
</style>
</head><body>
<div id="topbar">
<h1>TOP BAR</h1>
<div id="topmnu">
topmenu1&nbsp;|
<ul>
<li>topmenu 1.1</li>
<li>topmenu 1.2</li>
</ul>
</div>
</div>
<div id="sbr">
<h5>sidemenu1</h5>
<p>menuitem1.1
<p>menuitem1.2
<br><br>
<h5>sidemenu2</h5>
<p>menuitem2.1
<p>menuitem2.2
</div>
<div id="body">
<p><b>topic one</b>
<p>first line of paragraph one
<p><b>topic two</b>
<p>first line of paragraph two
</div>
</body></html>

Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
toylet <toylet_at_mail.hongkong.com> wrote:
Attached is some css codes for a website.
URLs are preferred.

Have you viewed that code via IE at all?
When the mouse pointer hovers over the top-menu, the bottom margin of
the top-bar expands downwards. How could I make the hover menu to stack
on top of the main-body, not expanding the bottom margin of the top-bar?

I believe it has something to do with absolute positioning, but I
couldn't figure it out.


Absolutely position all 3 blocks, note that you need to specify at least
one of the positioning properties "top, right, left or bottom".
http://www.w3.org/TR/CSS2/visuren.ht...tioning-scheme

Once you've done that you'll need to specify z-index to establish a
stacking order.

Also note that the dynamically expanding top section will currently
cause problems with regard to it's position to the other sections.

--
Spartanicus
Jul 20 '05 #2

P: n/a
> URLs are preferred.
Have you viewed that code via IE at all?
Oh, it doesn't work at all, notably the following:

#topmnu:hover > ul {display:block}
#topmnu ul {
list-style:none;
display:none;
position:absolute;
}
#topmnu li {
position:relative;
}

Mozilla rendered it properly, and displayed a pull-down menu on
hovering. On IE, it just ignored the tags.
Absolutely position all 3 blocks, note that you need to specify at least
one of the positioning properties "top, right, left or bottom".
http://www.w3.org/TR/CSS2/visuren.ht...tioning-scheme
Understood.
Once you've done that you'll need to specify z-index to establish a
stacking order.


I got around that by re-arranging the display order of the 3 blocks
inside <body>.
--
.~. Might, Courage, Vision. In Linux We Trust.
/ v \ http://www.linux-sxs.org
/( _ )\ Linux 2.4.22-xfs
^ ^ 10:04pm up 3:10 1 user 1.14 1.06
Jul 20 '05 #3

P: n/a
toylet <toylet_at_mail.hongkong.com> wrote in message news:<40**********@rain.i-cable.com>...
URLs are preferred.
Have you viewed that code via IE at all?


Oh, it doesn't work at all, notably the following:

#topmnu:hover > ul {display:block}
#topmnu ul {
list-style:none;
display:none;
position:absolute;
}
#topmnu li {
position:relative;
}

Mozilla rendered it properly, and displayed a pull-down menu on
hovering. On IE, it just ignored the tags.

It will never work on IE. IE only allows the psuedo class :hover to be
applied to A elements not UL or LI.
Jul 20 '05 #4

P: n/a
> It will never work on IE. IE only allows the psuedo class :hover to be
applied to A elements not UL or LI.


Thank you. I really like the simplicity of these CSS menus. No
javascript needed at all.
--
.~. Might, Courage, Vision. In Linux We Trust.
/ v \ http://www.linux-sxs.org
/( _ )\ Linux 2.4.22-xfs
^ ^ 9:18pm up 1 day 2:24 load average: 1.01 1.02 1.00
Jul 20 '05 #5

P: n/a
On Fri, 05 Mar 2004 21:19:16 +0800, toylet <toylet_at_mail.hongkong.com>
wrote:
It will never work on IE. IE only allows the psuedo class :hover to be
applied to A elements not UL or LI.


Thank you. I really like the simplicity of these CSS menus. No
javascript needed at all.

There is a way to get it to work using :hover, and adding Javascript, and
the only users who fall through the cracks are IE users with Js off. A
List Apart has an article on it, "Suckerfish Dropdowns"
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.