Css Dropdown Menu

CrazyRob

Oct 3 2006, 05:18 PM

hi eveyone for my new site i want to create a css dropdown menu

the 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

Oct 3 2006, 05:36 PM

Try here:
http://www.csscreator.com/menu/multimenu.php 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

Oct 3 2006, 05:47 PM

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.

Click to view attachment

truefusion

Oct 3 2006, 05:53 PM

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

Oct 3 2006, 06:04 PM

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

Oct 3 2006, 06:09 PM

QUOTE(mxweb @ Oct 3 2006, 02:04 PM)

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.

Edit:

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

Here's the CSS for it:

CODE

.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:

CODE

<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>

CrazyRob

Oct 4 2006, 05:29 PM

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

Oct 5 2006, 01:28 AM

Remove:

CODE

ul.nest {
display: none;
}

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

from the CSS.

Add:

CODE

in the HEAD tag.

and replace the previous list with this one:

HTML

<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

Oct 5 2006, 01:18 PM

ok i did that but i get an error

Firefox can't find the file at /C:/Documents and Settings/Rob/Desktop/mxscript/site/java script: dd('nest1');.

what have i don wrong?

truefusion

Oct 5 2006, 07:26 PM

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.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE