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.

Recent Queries:-

css dropdown menu style - 38.97 hr back. (1)
css dropdown menu with images - 50.08 hr back. (2)
free css menu dropdown - 143.14 hr back. (1)
css drop down menu - 171.21 hr back. (1)
simple css dropdown menu - 177.47 hr back. (1)
free css dropdown menu - 101.59 hr back. (2)
css dropdown menu - 202.03 hr back. (2)

Similar Topics

Keywords : css dropdown menu

How Do You Make A Dropdown Menu? - with css (13)
Css Menu -- A Little Help Needed - i want a cool menu (4)
ok, basicly i learned on trap17 that tables are bad for webdesign beacouse of their slow loading and
incompability with browsers. since i have some html, css and even php skills (very little indeed but
i have the will) i'm building this new website for local alternative club. i have enough time to
build it, so it means i can practice on those skills.. i basicly know how to build css website (and
i have a good book about it /smile.gif" style="vertical-align:middle" emoid=":)" border="0"
alt="smile.gif" /> ) so i wont bother you much with all of it, just this menu i ...

CSS Rollover Menu Code - for < a > tags used on HTML pages (5)

QUOTE(moldboy @ Nov 18 2005, 03:23 PM) ... I am wondering if you have a particular site in
mind that would show how? 206171 Hate to add this to a topic about unordered lists, but
here goes. Maybe this part will get split into its own topic later. I'll ask another mod how to
do that. ( new guy comment) My Webpage , or click on the bottom link of my signature to go to the
same site which has css rollover effects. This isn't the exact code that performs the rollover
on that site, but is from another (handier to acquire) html page on my computer...

Looking for css, dropdown, menu

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	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