Trouble with Second-Level ULs and CSS

Dealing with difficulties across browsers...

[nate451]

I've used CSS drop-downs before and been pleased. However, I'm having some trouble with this one that's revealing gaps in my knowledge. (Admittedly, my knowledge is probably more gap than anything else.)

The mark-up is simple:

<div id="navigation">

<ul id="nav">

<li>Archives
<ul>
<li><a href="">April</a></li>
<li><a href="">March</a></li>
<li><a href="">February</a></li>
</ul>
</li>

<li>Recent Entries
<ul>
<li><a href="">Entry #1</a></li>
<li><a href="">Entry #2</a></li>
<li><a href="">Entry #3</a></li>
</ul>
</li>

<li>Links
<ul>
<li><a href="">Link#1</a></li>
</ul>
</li>

<li><a href="">Syndicate</a></li>

</ul>

</div>

...And the CSS is relatively so:

#navigation {
position: absolute;
top: 50px;
left: 410px;
width: 130px;
border: 1px solid white;
text-align: left;
color: #666;
font-size: 16px;
font-weight: bold;
font-family: georgia, trebuchet ms, serif;
line-height: 200%;
text-transform: lowercase;
display: block;
z-index: 5;
}

#nav {
padding-left: 0px;
margin: 0px;
list-style: none;
}

li {
position: relative;
display: block;
width: 100%;
padding-left: 10px;
z-index: 6;
}

li ul {
display: none;
position: absolute;
top: 0px;
left: -100px;
z-index: 9;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
margin-left: 0px;
}

#nav a {
text-decoration: none;
color: #666;
margin: 0px;
z-index: 9;
}

#nav li li a {
display: block;
width: 90px;
padding: 5px;
font-weight: normal;
z-index: 9;
}

#nav li li a:hover {
background: #CCCCFF;
z-index: 9;
}

I've tried to keep as many irrelevant aspects from the code as I could. This code finally gets me what I want in IE--it's paying attention to the all-important top and left specifiers under "li ul". However, neither Netscape nor Opera give a rat's ass what I've specified for those. In general, IE tends to be the one not doing things properly, so what am I doing improperly to anger the two great web browsers so?

Any and all help is tremendously appreciated.

P.S. God, I wish I could delete this post and repost it with "levels" instead of "lebels". Pardon my tremendous idiocy.

[TheDoctor]

Have you tried it without the "#nav" rules? They might be adding specificity.

In general, I don't even think of trying something in IE (or anything else) until I've got it working in Mozilla. This saves (me, at least) tremendous confusion.

Lebel? Level? Never mind: bibere vivere est ("to drink is to live" - note the b's and v's in the original Latin)

[nate451]

I was testing the page in Netscape, Opera, and IE simultaneously and couldn't get any of them to follow my orders for a while. I simply was able to get IE to work with one structure at one point and decided that was when I should finally post it.

I tried changing the nav specification to ul, then tried getting rid of it and putting the padding/list-style directions under li, and neither changed the problem. IE did it right, the other two didn't.

[nate451]

It's nice to know the Romans beat us to the "Punk in drublic" joke.

[nate451]

A certain kind of work-around can be had using "li li" to move the items around. However, this seems to be buggy with Netscape (it goes flickery between movements), and it causes problem with using borders properly (I want the whole thing enclosed in a box, dangit).

[TheDoctor]

What version of Netscape are you using? If it's Netscape 7, then I'd treat that as the kosher handling of the CSS.

Strip your code down to the simplest case and build up from there (sorry I don't have time to try that out for you myself). It's the only way to deal with this sort of problem. As a bonus you might end up with less complex CSS.

[SuzyUK]

nate451..

how are you getting the hover to activate in IE?

I've tried testing using a whatever hover [xs4all.nl] behaviours file and am seeing some differences, so am a bit puzzled as to what you actually want to achieve, probably me being dense tho'

when you say you want this to appear in a "box" do you mean with the menu on the right and the "pop up" appearing on-top of it or to the left of it?
..at the minute it's appearing to the left in IE and on top in MOz..

I think because these 2 rules are in conflict:
li ul {
/* display: none; */
position: absolute;
top: 0px;
left: -100px;
z-index: 9;
}

li> ul {
top: auto;
left: auto;
}

I've been making some CSS hover menus and would welcome different scenarios.. to play and test, and find any problems..

Suzy

[nate451]

Mea culpa. I have this bit of Javascript in my header to make the menu work in IE.

<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

I want the pop-up secondary menu to appear exactly to the left of the menu items. It appears possible to shift the "li li" items over to the left, but not the "li ul". This means that I could give a border to the individual items, but not to the entire second-level box. Does that make sense? What I want to know is why Netscape (which TheDoctor is right to look to as the best handler, I think) resists any kind of movement of the "li ul".

[SuzyUK]

NN, in fact all browsers that recognise the child selector rule are obeying this rule
li>ul {
top: auto;
left: auto;
}

which is keeping the <ul> at the default settings of 0.

IE doesn't recognise the child selector so it's obeying the positioning set in the rule above it..

Try this CSS slightly amended for specificity and coloured for visual - then uncomment the child selector rule and see better what's happening - I've also commented bit's I changed and why.. You can change your widths back to suit if it works for you..

html, body {
margin: 0;
padding: 0;
}

#navigation {
position: absolute;
top: 50px;
left: 410px;
width: 130px;
border: 1px solid #0f0; /* changed for visual */
text-align: left;
color: #666;
font-size: 16px;
font-weight: bold;
font-family: georgia, trebuchet ms, serif;
line-height: 200%;
text-transform: lowercase;
display: block;
z-index: 5;
}

/* changed this rule so it covers all lists in the nav section */
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav li {
position: relative;
display: block;
width: 100%;
/* padding-left: 10px; change to text-indent to avoid box model things */
text-indent: 10px;
}

#nav li ul {
display: none;
position: absolute;
top: 0px;
left: -120px; /* a lttle less than the width to create an overlap */
width: 100%; /* added this to maintain the 130px overall width */
background: #ffc; /* added for visual testing */
}

/*
#nav li>ul {
top: auto;
left: auto;
}
*/

#nav li:hover ul, #nav li.over ul {
display: block;
}

#nav a {
text-decoration: none;
color: #666;
}

#nav li li a {
display: block;
width: 100%; /* changed from 90px */
/* padding: 5px; */ /* not required as previous line-height takes care of it */
text-indent: 5px; /* added to avoid box model stuff and simulate left padding */
font-weight: normal;
}

#nav li li a:hover {
background: #ccf;
}

if you want a "box" all around the whole menu I think you'd be be best to do an absolutely positioned one to simulate it, but because the lists will be of varying heights it may be difficulty to always contain it?

see how this goes though..

[Note: I notice that there is no way to get the "onmouseover" event to occur in IE unless it's the actual text that's hovered over.. I'm no good with the techicalities of javascript, so someone else could maybe help with this possibility?.. I tried every CSS trick I could think of but no go.. ;)]

Suzy