Topic: CSS Menu Not Doing as it's Told! (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28918" title="Pages that link to Topic: CSS Menu Not Doing as it&amp;#039;s Told! (Page 1 of 1)" rel="nofollow" >Topic: CSS Menu Not Doing as it&#039;s Told! <span class="small">(Page 1 of 1)</span>\

 
Gwynaveir
Obsessive-Compulsive (I) Inmate

From: Australia
Insane since: May 2006

posted posted 02-12-2007 22:11

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 02-12-2007 22:22

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)

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 02-13-2007 01:27

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>

Gwynaveir
Obsessive-Compulsive (I) Inmate

From: Australia
Insane since: May 2006

posted posted 02-13-2007 01:47

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 02-13-2007 03:03

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)

Gwynaveir
Obsessive-Compulsive (I) Inmate

From: Australia
Insane since: May 2006

posted posted 02-13-2007 04:23

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

Victoria Draken
Obsessive-Compulsive (I) Inmate

From: A Library Dungeon
Insane since: Feb 2007

posted posted 03-25-2007 02:29

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

Webgirl
Bipolar (III) Inmate

From: Around
Insane since: Apr 2005

posted posted 05-04-2007 22:11

Wow thank you for this code I nearly forgot everything.

Make my day and give me a smile



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu