Css Dropdown Menu

[CrazyRob 0]

hi eveyone for my new site i want to create a css dropdown menuthe image has what the menu needs to look like.but beneth all the links when you need to click on them another set needs to dropdown how can i achieve this.

[jlhaslip 4]

Try here:
https://csscreator.com/tools/multimenu for the html and javascript coding

Also, make certain that you also use the Style Generator on the same page (bottom of the right hand column) to generate the CSS for it.

[CrazyRob 0]

i dont think thats what i need here is what i want the menu to look like, but icant workout how to have a css menu that does just that.

[truefusion 3]

Using the "hover" pseudo-class, and unordered lists can achieve what you want. You'll find many ways on how it can be achieved here: http://css.maxdesign.com.au/listamatic2/

[CrazyRob 0]

tose menues are more along the lines of what i need. i dont rely know css i know simple commands but not a lot.

[truefusion 3]

tose menues are more along the lines of what i need. i dont rely know css i know simple commands but not a lot.

I see. Well, maybe i can do a "quicky" of what you need and post back later. Though, no promises.
[hr=noshade]
Edit:

Ok, i managed to pull off what i think is what you want.

Here's the CSS for it:

.main {list-style: none;}.main li:before {content: " > ";}.nest {list-style: none;font-style: italic;padding-left: 20px;}.nest li:before {content: " - ";}ul.nest {display: none;}ul.main li:hover ul.nest {display: block;}

And here's the HTML for the list:

<ul class="main"><li>Web Design<ul class="nest"><li>Reseller</li><li>Shared</li></ul></li><li>Website Design</li><li>56k Dial-Up Internet<ul class="nest"><li>Information</li></ul></li><li>Domain Registration</li><li>Merchant Accounts</li><li>Reseller Program</li></ul>

[/hr]

[CrazyRob 0]

ok thanks that helped bu after testing it i found that having it drop donw directly under was not rely nav frendly. how do i now hav the menu so that when you click on a menu the sub menu comes out to the right?

[truefusion 3]

Remove:

ul.nest {display: none;}ul.main li:hover ul.nest {display: block;}

from the CSS.

Add:

<script type="text/javascript" language="javascript">//<![CDATA[function dd(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = "block"; } else { obj.style.display = "none"; }}}//]]></script>

in the HEAD tag.

and replace the previous list with this one:

<ul class="main">
<li><a href="java script: dd('nest1');">Web Design</a>

<ul style="display: none;" class="nest" id="nest1">
<li>Reseller</li>
<li>Shared</li>
</ul>

</li>
<li>Website Design</li>
<li><a href="java script: dd('nest2');">56k Dial-Up Internet</a>

<ul style="display: none;" class="nest" id="nest2">
<li>Information</li>
</ul>

</li>
<li>Domain Registration</li>
<li>Merchant Accounts</li>
<li>Reseller Program</li>
</ul>

[CrazyRob 0]

ok i did that but i get an errorFirefox can't find the file at /C:/Documents and Settings/Rob/Desktop/mxscript/site/java script: dd('nest1');.what have i don wrong?

Edited October 5, 2006 by mxweb (see edit history)

[truefusion 3]

The thing is, when i inserted "javascript", it got outputted as "java script". Just remove the space inbetween. Must be a security feature for the forum.

[CrazyRob 0]

thanks truefusion this helped me a lot. now the navigation looks really professional thanks to you.