Fly out Menu and z-index - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Fly out Menu and z-index

Absolute position sub menu items

Dunce

8:23 am on Feb 6, 2011 (gmt 0)

10+ Year Member

Hi,

Can anyone please help with formatting a list?

In the simple list below, I would like;
1) The main list items should always be positioned at top 0px, left 90px of it's container (done)
2) Nested list items should be hidden (done)
3) The nested item that belongs to the "selected" list item, should be visible (done)
4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this)
5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top)

Many thanks for any pointers,

Cheers,
Mark


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
</head>

<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>

<div id="container"><div style="clear:both"></div>

<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>

<div style="clear:both"></div>
</div>


</body>
</html>

alt131

11:04 am on Feb 6, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Mark - and welcome back (2007 is a long time away)

Always validate when having troubles - there were several html errors that wouldn't have been helping. Plus not sure if the clearing divs are required - depending on the total page layout, consider applying clear to the ul, then to the element that follows, rather than using extra divs.

There are several ways to do this, but I think this one does all the things you listed, and comments in the code explain why. Note I shifted the whole of li.selected ul rather than just the li to avoid residual height issues were causing a visual gap. Also note the z-index: -1. This may seem odd, and originally would have been explained as ie's poor z-indexing, but I've just done some research that suggests ie is actually correct. Anyways, it works ;)

Tested in OP10.5, ff3.5, winsafari5, ie6-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
#container {
position:relative;
height:100px;
border:1px solid #000;
}

#container ul {
list-style: none;
padding: 0;
margin: 0 0 0 90px; /* use margin rather than position to avoid z-indexing issues*/
width:100px;
background-color:red;
}

#container ul li {
width:100px;
}

#container ul li ul {
display:none;
}/* hide nested lists */

#container ul li.selected ul {
display:block;
width:100px;
background-color:yellow;
position:absolute;
top:0; /* is the top of the ul, which is also top of #container */
left:-90px; /* length of margin */
z-index:-1; /* Stack the sub-list behind the ul */
}
</style>
</head>
<body>
<div id="container">
<div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul> <li>Nested item 1</li> </ul>
</li>
<li>item 2
<ul> <li>Nested item 2</li> </ul>
</li>
<li>item 3
<ul> <li>Nested item 3</li> </ul>
</li>
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>

Dunce

6:21 am on Feb 7, 2011 (gmt 0)

10+ Year Member

Many thanks for taking the time to help and reply.

I'm more than a little embarassed by the markup validation errors and that's very good advice btw :o

I spent quite a lot of time trying to sort this and was getting pretty frustrated at what I thought *should* have been quite easy - turns out it is - as long as you know what you're doing :)

Many thanks,

Mark

alt131

10:30 am on Feb 7, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Mark,

Delighted if this assisted, and don't feel embarrassed about validation errors - they creep in so easily when code is being worked over a lot. I know from lots and lots of personal experience - "validate your code" is - as you say - very good advice ;)

Also, easy to get bogged down when code doesn't work as expected - that's the value of having a fresh set of eyes take a look. You might consider dropping by more often - after all these years coding I'm sure you'll have lots to contribute.

alt