CSS onmouseover onemouseout

[Squintz]

iv tried editing
http://www.theimposter.org/examples/onhovermenu/

iv tried the vlady menu and the fish menu

i cant get any of them to do what i want. I hoping someone here can make this for me.

I need a 5 to 6 level drop down menu. I wan't to be able to use a Unordered List to format the menu along with CSS and Javasript to position and make the menu work with IE6 and Mozilla.

Can someone make this for me and ill learn about it as i use it. I'v spent many hours trying to get a menu working and i just can't take it anymore

Please help!

[squirellplaying]

What code do you have now?

[I EAT TUMORS]

It isnt a good idea to script one of the most critical areas of your site "navigation" with javascript considering there is about 20% of users have it turned off. Even thou javascript is widely used and very manipulatable i just dont think its a good idea.

[Squintz]

I guess i should have added that this is for use on a local server. The installer of the code will probably be the only one to ever use it. Its for turning on and off lights in my house. The web page will also display weather news and security cams.

The code i have is at home and i will try and get it to you when i get off work. I have played with it so much that it probably dont work. I will write up a sample list below to give an idea of what the levels will be.


<ul>
<li>Actions
<ul>
<li>Master Bedroom
<ul>
<li>lamp
<ul>
<li>On</li>
<li>Off</li>
<li>Dim
<ul>
<li>10%</li>
<li>20%</li>
<li>30%</li>
<li>40%</li>
<li>50%</li>
<li>60%</li>
<li>70%</li>
<li>80%</li>
<li>90%</li>
<li>100%</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Basement
<ul>
<li>Recessed
<ul>
<li>On</li>
<li>Off</li>
<li>Dim
<ul>
<li>10%</li>
<li>20%</li>
<li>30%</li>
<li>40%</li>
<li>50%</li>
<li>60%</li>
<li>70%</li>
<li>80%</li>
<li>90%</li>
<li>100%</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>


This and many a id or class in the first UL tag is all i want in my XHTML page. Each of the listed words can and probably will be anchored. The menu at www.theimposter.org works well in both mozilla and ie but it doesnt allow me to structure my menu in a list and it only allows for 2 levels. as you can see from the above i need atleast 5 levels. I would like to put the menu in a <div> so i can easily move it arround and place it where i need it. But there may be other ways so let me know the best way to position something like this.

Thanks for any help!

[coder_seth]

TUMORS, where are you getting your statistics about how many people have JS enabled?

[Squintz]

i still have not figured this out. Is anyone gonna help or should i just call this a dead idea and move on.

[Vladdy]

If you are referring to my demo here: www.vladdy.net/Demos/CSSNav.html then I may be able to help you, but so far I have not seen anything in your description that my demo can not do...

[Mhtml]

TUMORS, where are you getting your statistics about how many people have JS enabled?
Good point, I hardly think that 90% of people know what js is and how to turn it off.

[Squintz]

vlady your menu is what i want but i want it Horizontal not vertically on the page... how do i change this?

[squirellplaying]

Good point, I hardly think that 90% of people know what js is and how to turn it off.
I remember reading that somewhere as well. I don't remember where though.

[Vladdy]

Just style root list items as inline instead of block.
Check this thread at web developer forums: http://forums.webdeveloper.com/showthread.php?s=&threadid=30304 for discussion and example (http://www.douglas-county.com/Test_folder/cssmenu_test.asp)

[Squintz]

Vlady first id like to say thanx for all your help... But i am still not getting it. Can you make the changes to your menu and post them for me. Then explain what you changed... Here is what i need:

IE and Mozilla compatable
5 to 6 Level Drop Down
Horizontal Menu
Using Simple UL LI to format the menu.

I need to be able to position the menu in a fluid css layout.

Thank you!

[Vladdy]

That sounds like "doing it for you" rather than "helping you out"....

[coder_seth]

for the record, i really am curious if anybody has ever seen any statistics about JS usage/capabilities. i've seen browser stats and such, but i always see people talking about support/capability of JS, but they never cite any sources.

[mindlessLemming]

li {float:left; display:inline;}

...and you've got yourself a horizontal menu...

[Vladdy]

for the record, i really am curious if anybody has ever seen any statistics about JS usage/capabilities. i've seen browser stats and such, but i always see people talking about support/capability of JS, but they never cite any sources.
SE bots, arguably your most important visitors, do not use javascript. Seems like enough of a reason not to rely on javascript, especially in site navigation.

[Squintz]

mindlessLemming,
Thanks. I have not tried it yet but that will probably do it. I don't think i had the float:left in there. I will try and let you all know.

vlady,
I don't really want you to do it for me but after trying myself so many times thats what i came down to. I much rather do it myself because thats what makes me smile. When i can do it myself i feel like a better person. Trust me having you do it for me was only to keep me sain. i wil try mindlessLemming's suggestion and get back to you.

[Squintz]

Tried mindlessLemming code and it looks like it wanted to make it horizontal but it was 2 menus of 2 menus... I took a screen capture to explain..

[mindlessLemming]

I'm having great difficulty understanding your english. Can you please attach the entire page in question and we'll take it from there... :thumbsup:
Also, I forgot to say that you will need to set a width for floated elements or it may very well "bug-out" (that's the technical term :D)
Andrew.

[castali]

i also do not understand where you put >>> li {float:left; display:inline;}
to get the menu horizontal

the full code >>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Navigation</title>
<style>
#nav li
{ behavior: url('CSSNavIEHover.htc');
}

body
{ font-family: Arial, sans-serif;
}

a
{ color: #113;
text-decoration: none;
}
#nav
{ border: solid #113 1px;
background: #ccf;
width: 10em;
height: 20em;
padding: 0px;
}

#nav a
{ width: 100%;
display: block;
}

#nav ul
{ display: block;
margin: 1em 1ex;
padding: 0px 1ex;
width: 8em;
}

#nav li
{ display: block;
list-style: none;
padding: 0.1em 1ex;
min-height: 15px;
}

#nav->li
{ padding-right: 25px;
}

#nav li:hover, #nav li.hover
{ background: #eef;
}

#nav ul.sub1, #nav ul.sub2, #nav ul.sub3
{ position: absolute;
margin: -1.5em 0px 0px 6em;
border: solid #113 1px;
padding: 1em 0.5em;
background: #aaf;
width: 8em;
display: none;
}

#nav ul.root li:hover ul.sub1, #nav ul.root li.hassubhover ul.sub1
{ display: block;
}

#nav ul.sub1 li:hover ul.sub2, #nav ul.sub1 li.hassubhover ul.sub2
{ display: block;

}

#nav ul.sub2 li:hover ul.sub3, #nav ul.sub2 li.hassubhover ul.sub3
{ display: block;
}


#nav li.hassub
{ background: url('plus.gif') no-repeat 80% 50% ;
}

#nav li.hassub:hover, #nav li.hassubhover
{ background: url('plush.gif') no-repeat 80% 50% ;
}
</style>
</head>
<body>
<div id="nav">
<ul class="root">
<li class="hassub"><a href="#">Item 1</a>
<ul class="sub1">
<li class="hassub"><a href="#">Item 1.1</a>
<ul class="sub2">
<li><a href="#">Item 1.1.1</a></li>
<li class="hassub"><a href="#">Item 1.1.2</a>
<ul class="sub3">
<li><a href="#">Item 1.1.2.1</a></li>
<li><a href="#">Item 1.1.2.2</a></li>
<li><a href="#">Item 1.1.2.3</a></li>

</ul></li>
<li><a href="#">Item 1.1.3</a></li>
</ul></li>
</ul>
</li>
</ul>
</div>
</body>
</html>



thks for your help

this menu is really great !

I have tested with fireworks (it works without htc file) and IE ,, does it works too for Opera ?

[castali]

I have added >>>

<div id="nav" class="navH">
<ul class="root">
<li class="hassub hassubH"><a href="#">Item 1</a>

and the style >>>

.navH
{
width:auto;
height:34px;
}
#nav li.hassubH
{
display:inline;
float:left;
clear:left;
}


but it doesn't work .. I am trying on the same page to have 2 menu horizontal and vertical, with only 1 stylesheet

[Squintz]

Since i never got an answer that i understood to my original question i simply gave up and moved on to the rest of my site. Now i am back in the same situation. Refer to my original Post on page one.

What i need is the code for a multi level menu that uses an Unordered List as its layout. It needs to be atleast 5 levels and i would like to know how to make it six and seven if i needed to. This site will be used by me only so a small amount of JS is acceptable. The menu is going to be dynamically created using PHP and content from a mysql database. This is why i need the UL so that i can keep my PHP code a simple as possible. All the menus i have found to date are vertical and only 3 levels max... I Need Horizontal and 5 Levels at least.

Please help me it is really setting me back. I have been working on this page for a few months now and the only thing i cant figure out so far is this menu. I dont need the PHP od SQL code all i need is the CSS Java and HTML that i will need to use.

HELP HELP HELP!