CSS Horizontal Drop Down Menu - 2 of 2

[utkarsh12]

how do u move the table as a whole?

[utkarsh12]

hey, my menu is appearing vertically not horizontally?

[SMsype]

i have a problem, if i create a website under the menu and if i go on my dropdown menu it is under my website?!

what shall i do?

[DreamWeaverTutorial]

@SMsype It depends on what is underneath the menu. Is it a flash element? If it is not a flash element then the solution will be different. If you have a position of relative set on a div just below it then it can affect the stacking order of absolutely positioned divs. I can tell you the solution but you need to send me a link to the page with the problems so I can diagnose it - James

[SMsype]

@DreamWeaverTutorial thx, but i found the problem myself.

it was a div container set on relative. I delete that end i worked :)

And ur tutorial was so nice but one question i have is, how can i change the font-color of my dropdown menu like this that the color is first white and then if my mouse is on it black? would be nice if u could tell me ;) SMsype

[NorwegianMinecraft1]

@DreamWeaverTutorial i got a weird problem where i cant change page when i use the menu. i have edited the <a href tag to the right html file but in the adress bar it only adds a "#" to the current location

[DreamWeaverTutorial]

@NorwegianMinecraft1 Don't forget that on the pages that the links to go you also need to put in the links on those pages for the menu too. That's why most people then create a dreamweaver template file (DWT) and create pages from that with the menu embedded. the other option is to create a php include.

[Snaturlism]

Thank you.

[Aton488]

This little tag is what I've been searching for, for ages!!!

(br class="clearFloat")

Thanks so much!!

[RaZoRndBLaDe]

<3

[MiraiShiro]

Hi. Thanks for this fantastic tutorial. I'm trying this out on a new webpage I'm building, but was wondering if there's a way I can make the drop down menu part transparent?

[DreamWeaverTutorial]

@MiraiShiro hi, yet you can with images or css. If you go the images route then you will need to create the background images in photoshop and save them as PNG24 with transparency. If you use Fireworks then save them as PNG32 with transparency. If you use CSS then you need to look up the code for ALPHA Transparency for the backgrounds that you use.

[MiraiShiro]

@DreamWeaverTutorial Thanks! I think I'm much more comfortable with photoshop. When I create the images, do you know how I can integrate it into drop-down menu? Do I just insert the image on top? Also (sorry for this torrent of questions, it's my first time with CSS), is there a way to make the first row (the buttons) a different width than the list that drops down? Thank you for your time and help!

[DreamWeaverTutorial]

@MiraiShiro You need to set the background width and height of the background image you are going to use. Wherever the background color is set for the menu is where you need to place those parameters. Where the background color is set, delete that and type background followed by colon and that will bring up a dialogue for you to browse for the image in dreamweaver. after the link to the image type 0 0 and end with the usual ; . the 0 0 sets the image to top left.

[DreamWeaverTutorial]

@MiraiShiro you could give each dropdown a class of its own and then set a width attribute for it. it might be a bit stubborn so override your css selector like this.

width: 100px !important;

[fizzywheezes]

How do I insert sub links to the first link items?

[DreamWeaverTutorial]

@fizzywheezes just put in the text and highlight it with your mouse then go to properties panel and type in the link.

[cmarti826]

Great Tutorial...I got the menu working in its own page call navmenu.html. How do I insert it into my webpages? I currently using yahoo site builder, but am in the process of rebuilding my site using dreamweaver. Do you have any experience with yahoo site builder or can point me in right direction.

[cmarti826]

@cmarti826 I am currently in the process of redesigning my website using dreamweaver and I did get the menu into my pages using dreamweaver. Will i be able to upload pages to yahoo web hosting after im finished? I imagine i should with no problem. I used in the past a form through google and it posts to google docs, could i make an email database registration through dreamweaver as well? I made a form but dont know how to make it post to an excel file or something.Thanks for any input

[DreamWeaverTutorial]

@cmarti826 Hello I have not used yahoo site builder but its HTML and css and every program or device will accept that i would imagine.

[asasinz1]

Brill. Great video. Very easy to follow. Thanks mate you.....

[mags62ish]

ps, be good to have a follow on where there are three or more levels of menus!

[mags62ish]

Excellent tutorials for the drop down menus. Thank you, James.



[vykurpicus]

great tutorial. i've spent many hours moding menus i downloaded... next time i'll first search youtube for video tutorial. i got my own menu now and i know how to change it's properties. many thanks!

[shmulikgd]

how to i put the navagation bar in my website

[AJflusher279]

These two tutorial are the best I have ever had the pleasure of following, thank you so very much, and if you ever need a recommendation just hit me up! Excellent!

[mjrzasa]

Does this work in IE??

the

#navmenu ul li:hover ul {

visibility:visible;

}

does nothing for me in IE, but works in FF

[KodeLiMe]

How do i center the entire navigation menu? I tried putting center inside carrots and saying align: center in css, but nothing is working.

[DreamWeaverTutorial]

@KodeLiMe hi, I added the solution to the description for you - James

[KodeLiMe]

@DreamWeaverTutorial Thanks! This is by far the best drop down tutorial on YouTube. Very clear and you explain every step. Thanks for doing this!

[AllforDesign]

Oh man! Great job!!

Thanks!!!!!

[limatwo]

Thanks for excellent tutorial

[maazali47]

Thanks Buddy! You save me.. :)

[umairajmal43]

Very nice And thanks.......................

[SerpenTRyder]

Thanks.

[RyanteGamer]

Thank you so much! This is a great tutorial... I had some trouble changing some stuff, but it was simple once I worked it out. Thanks :)

[trollosaurs]

thanks for the tutorial man, its a "hash" symbol btw ;) hah

[DreamWeaverTutorial]

@trollosaurs You are welcome and it has four names:

number sign

pound

hash

octothorpe

hahahahahhahahahahah!

This video explains it's use in web design:

/watch?v=XZ5TajZYW6Y

[Novica89]

great one.

[farolito2009]

very nice tutorial

[sgeneralp]

how to link one sub-menu to another different sub-menus. i tried a lot but couldnt fix it. anybody help me pls.

[MrSouf36]

how to center it in ANSI ?

[kanine5]

For the selector #navMenu ul li:hover ul li a:hover i used #navMenu li ul li:hover and got it to work, but im not certain if it was the right way of doing it. Can you let me know? Nice tute, thanks.

[Games0IL]

tnx man because of u i decide how to do drop-down menu !

[carlo167]

You had the menu centered in the middle of the page at the end but didnt explain how you did it! I would love to know as I have spent ages trying to do it!

Thanks.

[JoeJimBlack]

How do you margin:auto this to the center of the page?

[DreamWeaverTutorial]

@JoeJimBlack

#div {

margin: 0 auto;

}

[DreamWeaverTutorial]

@JoeJimBlack do that to the outermost div

[SwapperzUK]

in firefox my menu shows in front of my flash image, however it doesn't in chrome and IE9 any ideas? Also anyway of using images for each hover rather than words. IE a picture of a house rather than "home".

[DreamWeaverTutorial]

@SwapperzUK try setting a higher z index on the menu to start and we will go from there. Do you have a link to the menu online?

[bgammill]

Very nice tutorial!

[Alanmarksman]

thank u thank u thank uuuuuuuu...........

[TheDesign4x]

great work friend :D

[mutumbakenya]

thanks for the vid

[MrChubib0]

is there a CSS effect that will delay the hover?

[DreamWeaverTutorial]

@MrChubib0 you need a transition effect. look up css3 transitions. I've been meaning to do that tutorial for a while now but haven't gotten round to doing it.

[MrChubib0]

@DreamWeaverTutorial thnx for the quick reply :) great tut

[etraderx11]

Nice stuff, thank you!

[derkjna]

is there a way to make a menu in 1 file and then have every thing by 1 link or something else in a other file?

[mauce88]

Totally awesome, thnx a million!!!!!! Why are they teaching me this at lawschool???

[ambassadorgolfclub]

This is a great tutorial! Thanks!

Question: How do I get the menu positioned so that it sits 0px from the left side of the browser and 200px from the top?

Thanks

[BadWolf002]

This was great. The tutorial was explained wonderfully. The menu was not centered in a screen, but I went to his website and he shows how to center it in the comments. I do have a question about how how to lock them into place so when you resize the browser screen it doesn't rearrange them all to fit (because then it hides the tab links above it) but instead just makes the scroll bar appear.

[BadWolf002]

@BadWolf002 Nevermind, I figured it out!

[kkanimator1]

great video it helped me alot...but i have a problem(not working on IE 6) please help me in this

thanks

[DreamWeaverTutorial]

@kkanimator1 don't worry about IE6, microsoft is forcing people to upgrade to ie9 in one weeks time. Noone will have ie6 anymore.

[DoctorWebmaster]

@DreamWeaverTutorial

Thank you very very much guy. I'm from Germany but the German tutorials are soo bad. At the other hand they use some templates etc. or they explain it very difficult.

[71GA]

This is an exelent tutorial. Is it possible to make a tutorial for a dropdown menu with 2 or 3 (at least 2) nested unnumbered lists???

[Onkarjun]

How do you make links with the various buttons in the drop down menus?

[ffr3ak]

This is awesome! thank you very much

[Snaketazzie]

hey im having a problem, i added a third submenu on one of the submenu but its displaying at the bottom of the first submenu like

home about  history story <--this one is the third submenu, how can i get it to fall out like this

home about history story <--- im tryin to get it done but im not too sure if i have to add another set of code or just define it in one of the css code

please help

[Mogumbow]

Really good job. This will be used with some changes :D

[artjagman1]

THANK YOU!, THANK YOU!!, THANK YOU!!. I have been wanting to learn how to create dropdowns for sometime now but couldn't understand most tutorials and my mind would switch off.

Although it seemed complicated you somehow manage to make it easier to understand and interesting to follow by explaining what and why to did the following, so kudos for that and shall be looking for more tutorials that you may post. You the man!!

[scorpioniz]

YES! this video so helped me :))) thanks a lot

[PixterPro]

would you know how to make the font smaller so that I can fit more words in?

and by the way, thank you very very much! this is truthfully helpful! :)

[winkipinky]

@PixterPro

add: font-size:12px;

to the #navMenu ul li a{ ... or 10, 8 etc.

[MARIORDELEON]

thanks for posting up this video but a problem i had was it was working perfectly on firefox but not safari and was wondering what could be the problem

[FiannaBeo]

everything worked out perfectly. Thank you very much. I have one question though. How do you get the menu in the middle? At the end you put your screen on pauze and when you come back your menu is in the middle. I would like to know how you do that.

Thank you very much!

[DreamWeaverTutorial]

@FiannaBeo work out the width of your menu including any borders then apply the width to the outermost div of the menu. Then set the margins on that outer div to auto:

#divName { margin: 0 auto;

}

[FiannaBeo]

@DreamWeaverTutorial

Thank you very much!!! I am trying to make it fit on mobile devices. I know that on the mobile devices there is -webkit-box-flex: 1; to make sure it aligns on all screen. It is part of CSS3 and HTML5. Is there the possibility to make it fit according to the box flex effect? I have been trying, and I think it should be possible, but I do not know exactly where to implement this change, and if there are things I need to remove.

Thanks again for your fast reply!

[randomstuff6791]

@DreamWeaverTutorial can you please do a tutorial like this, but without any dropdown effects? I don't really have anything to put down there ^^

[winkipinky]

GREAT Tutorial, good speed, good sound and very helpful!!

Thanks.

[ElusiveEdits]

thanks for this tut, i've always carried this out through javascript but this is a much nicer way of approaching it! It's amazing what CSS can do now!

[riphope76]

hi there, could you show how to do that on a horizontal menu please?

[jonathanbautista1984]

I just started learning how to create a website and this video helped me a lot. Thanks for the tutoria!

[Denizar]

Hi, great tutorial. I am trying to use this styling with joomla's extended menu module. It assigns a class to each li tag called "mainlevel", and for the submenus (second level ul) the li tags have a "sublevel" class.

My problem is with current menu styling. The li tag that is currently selected has a "mainlevel_current" class. Whenever I try to style the mainlevel_current, ul li a all the other mainlevel ul li a styles get overriden.. how can I avoid this? any ideas?

[D3MEDIAorg]

You're highly detailed, and not hard to understand.

Thanks a ton man. Subbed for sure

[normaww]

i have IE8, how can i make it work there?

[imyxle]

I think you skipped the part where you center the nav menu. It seems like you centered it at the end when you pause to add all the links. Also, is there a way to make the nav menu stay on the top of the page all the time? My previous nav menu i had used position: fixed and that kept it on the top of the browser screen when you scroll down the page. I like your CSS menu and decided to change the website for that, but I can't figure out how to get the menu to stay up.

[sunsetbusiness]

Good job with this tutorial. You were the most clear and most easy to follow. The menu looks great and works in all of the browsers I tried it on. Thanks! Great Job Also!

[5woodlandway]

The code works in Firefox fantasticly but not in IE9. The dropdown menus do not appear. Does IE9 not know position:absolute; Help

[pew2007]

Very informative tutorial. Much easier than reading :D

[Aussiesurfbutt]

hey how do you align into the center?

[Pallepop909]

i did the menu as you did it but i got a gap between the menu and the drop down of about 5 pixels .. as soon as i reach for the drop down they dissapear again :S what can i have done wrong .. ive went over it 5 times looking at the video

[DreamWeaverTutorial]

@Pallepop909 That's unusual. Unless you send me a link I wont be able to tell for sure. But, there is the full code for the menu on the website. Go there and copy the code. - James

[Pallepop909]

@DreamWeaverTutorial i figured it out watching your video a 6th time :D But thanks for the quick respons .. Love your videos .. they help me ALOT

[S4VN7]

@Pallepop909 I had the same problem. Just go back into the CSS and go to the ID of navMenu ul ul and lower the "top" selection until the problem is gone. I did #navMenu ul ul {top:32px} and ran into the same problem so I lowered it back to 30 and it worked. Hope this helped, unless you've already figured it out.

[ElusiveEdits]

@Pallepop909 Hi Pall, have you resolved this yet? Your problem is probably this : if you have that 5 pixel margin from the bottom, when the cursor comes into contact with white-space the hover rule is canceled, therefore your menu will disappear. Try to edit your bottom margin so that there is little gap.

Also what browser are you using? Id strongly recommend building in Firefox and using firebug to overcome platform errors, hope this helps!:)

[TobyMastr]

Thanks For the Help. Really Needed It. Didn't Have any Problems. Thanks Again

[MadsTheMagician]

I have made it, with five main links, but when i zoom out in the browser, the last of the main links drops down under the others, what am i doing wrong?

[joeldfisher]

how can I expand the bar so it's 1024px wide and the text is centred?

[anndddrrrreeeeesssss]

I am learning very much with your videos, thank you very much...! :-)

[Amadeogovoni]

Lo estoy probando en el IE, Firefox y en el Chrome y se ve mal : ((

Ahora sestoy bajando el Safari

Saludos

[ExecutiveDmitri]

Thx. You rule... Now I possess the powaaaaaa.... a-ha-ha (evil laugh) o da! ^_^

[Prankster330]

Dear James, I followed your tutorial completely and understood very well. I have one problem though. I want my drop down list not to wrap to the next line when I resize my browser. How do I do that?

[MrSchulzi1996]

how to make a further "Link Item" in a "Link Item"?

[DreamWeaverTutorial]

@MrSchulzi1996 copy the code from the opening UL tag to the closing UL tag and that makes up 1 menu item with a drop down. for additional link items you just need to copy 1 opening Li tag

[MrSchulzi1996]

@DreamWeaverTutorial I sent my codes per PM. Because there were to much letters to post it in the comment. Please read.

[troglodyte3344]

hello man

[THEKING180490]

hey,

i have a problem with your code. i've made it 1:1 like you told it, but when i go with my mouse down the menu it all turn in blue!!!! i really don't know how to change it. please help me with that problem and answer me at renske96@hotmail.de

thx,

rené

ps: when you answer me, i send you my css document ; D

[DreamWeaverTutorial]

@THEKING180490 Hi Rene, just go to the website and the look for the tutorial. All of the code is there so just copy and paste it. - James

[alexilaiho1st]

TYVM!!!!!!!!!! u helped a lot.

[rishabkapoor1]

Awesome video..

[victorvk98]

nice 5 star,s  ***** super nice i love it

[zoopstud]

Really nice tutorial! Thanks!

[oakali99]

hey , what if i want too upload a image instead of a color in the menu,,,,,,,,,, what do i do for that

[DreamWeaverTutorial]

@oakali99 where the background color is set change it to url(location of image here); if you are using dreamweaver then you can browse for the image.

[3tasker1]

Hi, Just Wondering about the Compatibility with this and IE7, as I have followed the tutorial but the Nav bar will not show properly in IE7. It works Fine in IE8 and Google Chrome Etc but I cannot get it to work in IE7 for the life of Me. Any Help would be greatly appreciated, Thanks. Chris

[MrFredzzz]

headache!!!

[cooldevansh1]

how can i get the menu side by side its veritacal!!please help

[DreamWeaverTutorial]

@cooldevansh1 you have missed something in the tutorial, go to the website and search for the article of the same name as this video and copy and paste the code instead. - James

[Thet3]

@cooldevansh1 Just copy everything inside of the #navMenu and paste! 0:04 Or maybe you missed something.. Just do it over then.

[cooldevansh1]

@Thet3 i got the problem the tabs were very big in size that's why its not fitting in my website... anyways thanks for the reply!!!

[lilstaffie000]

what program are u using?

[googlewatcher]

Hello.

Instead of dreamviewer i typed it in notepad and saved it as html and css file.

it almost worked, but for some reason they go in vertical order instead of horizontal (the bar with products - products - products). Does anyone have an idea what I did wrong?

[DreamWeaverTutorial]

@googlewatcher check your code against the code on the website if you are having trouble following the video tut. - James

[googlewatcher]

yes, it worked :) I missed one semicolon

Though I have one other question:

I have to paste this html code in every (sub)page of my site, right?

[DreamWeaverTutorial]

@googlewatcher hi yes you would need to place the HTML on each page but you can refer to the css by linking to it.

[zhngyunfeng08]

i'm still new on learning web page design, i quite enjoy this tutorial because the instruction given very clear and nice. just one question, after i finish all the step, how do i make the overall to be align in center when viewing in IE or firefox? can you teach me 1 or more options can be done beside creating a div#wrapper in my css there to make it center, thanks~

[muscleEVmass]

to center the menu add the following to your css sheet:

div#wrapper {  width:760px; margin-left: auto; margin-right: auto;

}

thumbs up so everyone can see!

[MadsTheMagician]

@muscleEVmass thanks for the tip! but i have a problem; when i then zoom out in my browser (i'm using firefox) the last main link in the menu snaps down under the others.. do you know how to fix that?

[5woodlandway]

#wrapper {

width:1000px;

margin-left: auto;

margin-right: auto;

}

works

[ivanchogc]

@muscleEVmass Hi friend I followed your tip...but it puts no exactly in the centre, so near. Im using Firefox.I try with another values to "width" like 620, 630 and was better. Best regards

Pdta: Would' be another method?

[DrMabuse2006]

Ah crap...never mind.*bangs head on keyboard*

[DrMabuse2006]

All works as it's supposed to except the extra buttons appear a line under the first one.

[AdrianSaneTV]

outstanding work my friend!!! been trying to teach myself javascript so I could create the same effect you just taught me with css....Kudos!

[jamieball1991]

What was the point of the clearFloat bit?

[DreamWeaverTutorial]

@jamieball1991 when the menu is floated, if you add this menu to another page or add content below it, the content will float up too. by clearing both left and right, the page returns to normal and the content you place will be in the right position.

[11creeh]

everything worked perfect for me, thank you so much! Now I'm just having problems centering the darn thing =( I searched the comment section and tried a couple different ways suggested, but they are not working for me =(

[DreamWeaverTutorial]

@11creeh email me the files. ill send email address to your inbox - James

[TheAvfcman1874]

thanks so much, one question though!

How might i be able to center this?

This will help alot! thanks!

[DreamWeaverTutorial]

@TheAvfcman1874 wrap it in a div with an ID and set margin to the div like this...... margin:0 auto;

[TheAvfcman1874]

@DreamWeaverTutorial thanks for the speedy reply, though it didn't work, i tryied the way you told @dora877 and that didn't work either, will i send you my html and css style sheet?

[DreamWeaverTutorial]

@TheAvfcman1874 send it to my contact form - James

[TheAvfcman1874]

@DreamWeaverTutorial no worry i got it working :D

[DreamWeaverTutorial]

@TheAvfcman1874 ok got that message afterwares ;) - James

[mng95]

@DreamWeaverTutorial My link items arent centered with my main links why is this help pleaseee

[DreamWeaverTutorial]

@mng95 on the ul li a you need to set text-align:center; you maybe missed it in the tutorial.

[Naresh7080]

Dude! part one you explain very nice. But in part two when I am copy and paste all the UL five times. It is coming one below another. I mean not coming in one line. r u using any extra tag for that.

[DreamWeaverTutorial]

@Naresh7080 you have missed some css syling along the way. go to my website and find the tutorial article of the same name. it had full code examples that you can copy and paste. - James

[TEXperTfootball]

thank you very much :)))

[mallettepagano]

Thanks for this tutorial, and it helped me a ton. But all the drop down menus appear under all the images on my page. Is there a way for the drop down menu to go over everything?

thanks!

[DreamWeaverTutorial]

@mallettepagano what browser's does your problem occur in? Is it only one browser?

[mallettepagano]

@DreamWeaverTutorial It happens in all browsers. I've been searching for answers and other tutorials mention a z-index, but I'm not sure where to put that.

[DreamWeaverTutorial]

@mallettepagano I dont believe it happens in all browsers. show me a link.

[DreamWeaverTutorial]

@mallettepagano Ok I see, You didn't tell me you had a cycle plugin attached. Go to the CSS for your

#navMenu ul ul and then set a z-index of around 50 like this:

z-index:50;

[flammin8ball]

how would you make it vertical?

[DreamWeaverTutorial]

@flammin8ball turn your monitor on it's side to make it vertical

[PartyDoffy]

please help i cant move it to the center of the screen please look at my website and look at problem thanks, mafialand(.)net

[DreamWeaverTutorial]

@PartyDoffy wrap the menu in a div, give the div a set width using css and then set margin:0 auto;

[PartyDoffy]

when i hover over my menu i want the text im hovering over to be BOLD how can i do that, thanks

[DreamWeaverTutorial]

@PartyDoffy find the link hover - a:hover and set font-weight: bold;

[PartyDoffy]

@DreamWeaverTutorial ok thanks

[Pileyrei]

GREAT tutorial - thank you for sharing.

[willissteve0]

can't believe I spent ages coding this in javascript when I could just do it in css

[kaliburx]

Hi follow this tut and its works perfect on windows xp IE but on Ubuntu linux 64 11.04 the #navMenu ul il:hover ul { display : visible;

}

Section is not working on my firefox and chrome on ubuntu. Any ideas on a possible walkaround or method. Thanx