Topic: CSS Menu Not Doing as it's Told! (Page 1 of 1)

I started making popout CSS menus yesterday and the code is mystifying me. It's like my text doesn't want to obey it and whatever I do doesn't make sense. The following HTML code:

<div id="menu">
<ul>
<li><a href="index2.html">Index</a></li>
<li><a href="what.php">What is this?</a></li>
<li><a href="who.html">Who are you?</a></li>
<li><a href="images.php"Images</a></li>
<li><a href="blog.php">Blog</a>
<ul>
<li><a href="blog.php?2007">2007</a>
<ul>
<li><a href="blog.php?jan">January</a>
<ul>
<li><a href="blog.php?15">15</a>
</li>
</ul>
</li>
<li><a href="blog.php?feb">February</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="index.php?links">Links</a></li>
<li><a href="index.php?info">Information</a></li>
<li><a href="index.php?people">People</a></li>
<li><a href="images.html">Webcam</a></li>
</ul>
</div>


Added with my CSS code:

#menu {
position: absolute;
top: 280px;
left: 10px;
width: 12em; /* set width of menu */
background: #7d977a;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}


#menu a {
color: #000;
background: #7d977a;
text-decoration: none;
display: block;
}




#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}



div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#menu a:hover {
color: #7d977a;
background: #000;
}



Somehow manages to list "2007" underneath "Blog" when it should pop out from it. Whereas, if I put an extra <ul> at the start of my menu, (when I make the "Blog" item into it's own menu on a different document) then "2007" pops out from "Blog" but then the "15" pops out from "January" without me hovering over it (when I'm hovering over "2007").

I can't see what I'm doing wrong! I've been double checking my code against the tutorial code and it just does not make sense to me.

The tutorial I used is at: http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp

The World is Made in Desperation, and I am a Desolate Spirit - The Misery

edit - missed part of the code, so nevermind
do you have a working page to link to so we can get a better look?

(Edited by DL-44 on 02-12-2007 22:29)

You're missing a closing bracket on the sixth line, although inserting it doesn't seem to fix the problem.

<li><a href="images.php"Images</a></li>

Hey, I've uploaded my sample code above to http://www.reference-desk.net/learning/menu.html

Apparently though, it doesn't work in IE yet (there's a code fix up to be added later) so you have to open it with Firefox or something else.

The World is Made in Desperation, and I am a Desolate Spirit - The Misery

http://in-dented.net/temp/menu/

seems I was on the right track in the first place. The '2007' is on the 2nd layer of nesting, and nowhere in your CSS do you account for control of that level.

(so it was in fact doing *exactly* as it was told )

the above works in firefox, haven't checked in other browsers....



(Edited by DL-44 on 02-13-2007 03:04)

Dude, you rock! Thanks! I thought it was something in the HTML code (hence me posting it in the HTML section) so I didn't even think to look at the CSS! Thank you so much!

The World is Made in Desperation, and I am a Desolate Spirit - The Misery

Oh boy do I suck... I now have a new problem with the same CSS menu (which I realised much later that I should probably have put into the section ABOVE this one...).

I've added in the file and codes that the tutorial told me too so it will work in IE, and it's just not working for me. And I can't understand a word of it! I know this is a hassle... but can anyone out there read it and tell me what might be the problem? Sorry for the trouble!

Added file is: http://reference-desk.net/green/csshover.htc
CSS code is: http://reference-desk.net/green/green.css
Working page is: http://reference-desk.net/green/

Thanks!

-
- -
- - -
- -
-

The truth is just an excuse for a lack of imagination. -

Elim Garak, Star Trek : Deep Space Nine

Wow thank you for this code I nearly forgot everything.

Make my day and give me a smile