Added: 1 year ago
From: DreamWeaverTutorial
Views: 177,959
Sort by time | Sort by thread (beta)

Link to this comment:

Share to:

All Comments (336)

Sign In or Sign Up now to post a comment!
  • This is great! Nearly perfect... but how do I make the drop downs work in Internet Explorer and Chrome?

  • finnaly the guy i was looking for! exellent tutorial!

  • thank you very much!! helped me!

  • #navMenu li{

    position:relative;

    }

    and

    #navMenu ul ul

    { position:absolute;

    }

    how does it work?

  • @arsymizz33 if an element is position relative then anything inside of it with a position of absolute will be positioned very close or "relative" to that element. If you don't specify a position relative then the absolutely positioned element will attach to the body tag and be top left for instance. If you have problems with the code then visit my website and look for the written article tutorial of the same name which has full written instructions.

  • @DreamWeaverTutorial

    In the case of two div, relative means vertically and absolute means horizontally, but in ul and li , is it different?

    Or am I completely wrong?

  • how is that possible... what the fuck!

  • Excellent tutorial ! ... Thanks for the post ! ... Very useful !

    How can we have this drop down menu working properly when we place it in a specific slice or row in another html doc. ???

    I have placed it correctly, but I can't see the drop down effect ... All I see is the roll over effect once is placed !

    Can you be so kind to help me out ?

    Thanks so much !

  • Man...so helpful! Thank you so much.

  • thank you very much, great tutorial

  • thank you again, so much, for your swift reply! I look forward to experiencing your other tutorials.

    you sure can type opening and closing tags quickly! they drive me cookuu

  • In any of your tutorials is jQuery library or plug ins defined, and explanation of their use and

    advantages vs a straight JScript

  • @GaryWilsonIADT Hi, the jquery library is more lightweight than javascript which helps with page load times. jQuery is quicker to write with so should save you a lot of time. Google are releasing their own javascript library called 'Dart' although at this stage it is unknown if it can take on libraries like jQuery or MooTools as they are very well established and hugely popular.

  • was thrilled to receive Email regarding my comment(s). I will definitely stay tuned!

  • Thanks this was a really great tutorial :) it looks sooo good but i've just got one problem, when i re size the window or dont have it full screen the links at the top dont stay in a line and instead go like under each other to fit on the screen which completely mucks up the look of the nav bar and the functionality of the drop down links :S can i has help plz?

  • @HolyShed Hi yes give the outer menu wrapper a set width. If you followed the tutorial exactly then each menu item is 150px in width including the borders so add each menu item up and that will be the width to set for the wrapper. + - a couple of pixels.

  • Thank you very much still encounter some problems though. :) If I dont want all the menu entries to be drop down only two lets say it wont apply the background and font style to the regular links. But that just takes some fiddeling about with the stylesheet. Im getting there. However, excellent tutorial really helped me to understand how this works. Cheers! :)

  • absolutely excellent tutorial and teaching style

    i had been taught css drop down with flyout where we had to designate our target selectors usinhg

    the > symbol.

    am looking for a drop down flyout tutorial now by same person

  • @GaryWilsonIADT Thanks for you comment. Yes the > symbol is a great technique and you will probably need it to create a flyout menu because you need to override the 1st drop down and the > symbol comes in perfect for that. If IE6 dissappears then you won't need the > symbol as it really is just needed to fix IE6. I've got some work to do over the next month but I've been meaning to sit down and work through some tutorials. I'll defo put out some menu tutorials though. stay tuned

  • My school doesn't teach any computer science classes, luckily I'm a spatial learner. So I fluently self-taught myself c++, java,html, and jacascript in 2 months. I'm working on css and using this video as a self-teaching example. Also, I'm following this tutorial using notepad ».«

  • No sarcasm or anything... just a simple question "isnt it possible without actully going into code view? people buy so costly dreamweaver for that i guess"

  • @nayab99 It is possible but this tutorial was designed for college and university students just like most of my tutorials. I don't cater for beginners at all. There are plenty of channels for beginners on youtube.

  • @DreamWeaverTutorial Interesting, I have been in HTML class for two weeks in high school and I followed all of this...granted I do learn fast and decided to go way ahead of what the teacher is currently teaching.

  • Mine isn't working...

    The float and position have no effect.

    I checked to see if the CSS styles was done correctly, its linked into the page.

    But I don't see any changes...

  • @DrClay999

    I also tried using the video response's method. The drop down menu is all screwed up, and only the "Products" section is visible.

  • @DrClay999 check your code, you may have made a mistake in the html or you may have name your css selectors wrong which is usually the case in these types of situations. Failing that go to my website where there are full code examples to copy and paste. Failing that send me a link to the menu and Ill see if i can find the problem. - James

  • @DreamWeaverTutorial what height and width are the tabs

  • @adobejunke113 the height and width is defined by the padding and the font being used.

  • @DreamWeaverTutorial

    Does it matter what version of Dreamweaver I am using? I am kind of lost here...

    I feel I am doing it correctly, its just displaying it wrong...

    I am using the 2004 version of Dreamweaver.

  • @DreamWeaverTutorial

    Nevermind I got it.

    What happened is that the menus would get all screwed up in the display section... turns out that doesn't matter because they eventaully got fixed. I thought these were more side menues but it turns out they were the hidden ones. Thanks for the quick reply man! :D

  • If i want to add a sub sub menu, how do i do that? i tried putting in a new ul under the il i wanted (after end) but it doesn't do anything, just opens it automatically like it was part of the first ul... i have one ul, the menu buttons, then when i hover the button i want the others come up (or down) but at the same time it shows the sub sub menu's options, and under it... help please...

  • @joakimpedersen Mike at TheWebtuts has made a follow up to this tutorial and will show you how to add another level to it. go and visit his channel @thewebtuts

  • You are a great teacher. One of the best and most clear vids on CSS menus that I've seen. I haven't played around with the code yet and may be able to do this on my own later, but how would you offset the dropdown a little bit so that it doesn't drop directly below the menu titles?

  • wow cool video i learned a lot be sure to visit my channel for more cool tutorials i can show you how to make a better css menu for free and it takes only 6 mintues of video to do that so head over to my channel anyone thats interested. is there anyone interested in making their internet faster of unlocking their iphone or even getting avg free head over to my channel now great video by the way

  • Cheers for the vid very helpful, just one question

    how do i make the nav bar go to the centre of the page?

  • Hi, are you familiar with Concrete5 CMS? I am trying to incorporate your method in my C5 website but not sure if the CSS will interfere with the CSS of the theme template.

    I also wanted to ask if you know of a way to create a slideshow with multiple "swf" files to load one after the other in random order. Got 15-20 swf files with animation that I want to load in the same way as an image slideshow. Load, play animation, remain loaded for 120-Secs, unload and load next. Thanks for your vids.

  • Hey i have completed this tutorial very awesome but one thing it doesnt work in IE 9?? is this something i can change to make it work inside of IE? thanks

  • @syco1986 It works in IE9. If you tell me what is happening then I might be able to assist you. If you just say it doesn't work then I cannot assist you because I don't have enough information.

  • @DreamWeaverTutorial Thanks alot but i got it working and i have been using this a fair bit thanks.

  • Great tutorial!!! Amazing.. i wanted to know that when we move the mouse over a picture i want that picture to show itself in bigger size?? how can i do it??? by hover method can you please help me with that .. thank you very much in advance !!

  • great tutorial

  • Can anyone tell me how to have the menu go over the picture I have under it? the drop down disappears behind the image, and thats not gonna work for me D:

  • hi, thank you for the information!, i did every thing you say it work fantastic in fire fox and google chrome but how can i make it work in internet explorer? please help me.

  • comic sans !!!, good tut tho :)

  • Comment removed

  • hmm, at the 7:40 part the first list item in the inner list is lower than the rest and I can't figure out why.

  • @TheOnlooker2010 with everyone relying on experts, eventually there will be no experts and no one will know how to do web design for themselves.

  • how is name of this program where are you programing !?

  • @MegaWollf adobe dreamweaver

  • what's the difference between #navMenu ul li , and #navMenu li ? except the fact that first would apply just to unordered.

  • Comment removed

  • #navMenu ul li a

    where does the 'a' come from?

    thanks a lot, very helpful!

  • @smokenfly514 The 'a' refers to the href link itself as opposed to ul or the li tag, it specifically targets just the link which allows you to style the li tag differently from the a tag if you wanted to.

  • @DreamWeaverTutorial Why aren't you answering?

    Btw, I finished the site myself since you never answered (3 weeks ago)

  • @SulaFreaks btw we dont care

    

  • @syco1986 Stop thinking that everyone is talking to you.

  • @SulaFreaks btw shut your mouth

  • @syco1986 This is the difference between people who become something and that someone that just says shut your mouth to everything. Yeah, that's real factual syco1986.

  • @SulaFreaks btw YAWN

  • @syco1986 I'm not the one who can't argument and just broke inside a conversation that I have nothing to do with. (Yes, syco1985, I am referring to you. no shit) And you're like 25 years or something wtf? Stop trying to be cool on the anonymouse net and get a girlfriend ;)

  • how can i make a dropdown menu in a dropdown menu.Thats not a joke but very important :)

  • Friend a question, how I can put inside a table? please tell me.

  • COCK

  • I liked your videos..

    make more videos like this type of

  • How do i center the menu?

  • thanks a lot

  • Gracias gringo =DDDD

  • i keep on gettin mess up when u put the menu inline, not too sure y but ill keep tryin n let u know

  • it works...love this....

  • Not working in internet explorer 6 , it's important to work in every browser , some people use that old browser.Some use Xp and it's give automatically.(With your code , copy and paste)

  • @TheSuperSupa want it to work with IE6? Use a hack. Not even google offer support for IE6 anymore. I stopped offering support for IE6 2 years ago as it is now -cost to profit- ineffective use of time.

  • @DreamWeaverTutorial that's true . You do a great job anyway keep going and thank you for your tutorials.

  • @TheSuperSupa You are welcome. I just checked my stats on the dreamweaver tutorial website. I am very close to 50,000 visitors a month. 140 visits a month are from IE6 browser users. If you really need it to work in IE5 then I will write a hack for you. But you should check your analytics to see if it warrants it. All the best. - James

  • hi i followed you tutorail and everything is working fine but only on google Chrome and firfox not in Interenet Expolorer could you tell me why?

  • @Rajeetharaen hello, what happens exactly in explorer? Ill tell you the fix.

  • Thank you!

  • if you use cs5 your screwed. :(

  • @SoloSphereGaming CS5 has nothing to do with HTML or CSS. It does nothing to the code. It doesn't do anything to it because it it just a code editor. If you have made a mistake it is because you have typed the wrong code. That will always be the reason.

  • @DreamWeaverTutorial your right I need to just take another look and try again. thank you.

  • @SoloSphereGaming there are full code write ups for this tutorial on my site. If you go there and copy and paste the code it may only take you 5 minutes to make the menu. - James

  • @DreamWeaverTutorial ok I think I'll do that, Again sorry for my frustration. making these videos are not at all easy. thank you :) I subed btw

  • @DreamWeaverTutorial Same here Dreamweaver CS5 doesn't work =(

  • @ExecutiveDmitri Yep... Did it on friends pc who has CS4 worked like a charm.

    Something is up with CS5 for sure.

  • @ExecutiveDmitri Check the video response I just made to show you Dreamweaver CS5 works fine.

  • @DreamWeaverTutorial HERE IS THE WIERD PART: It worked! I tested in my CS5 and worked just like your one did. Amazing! Thx for showing me enlightment, much appreciated... ^_^ Bottom line: IT'S THE SKILL, not software...

  • @DreamWeaverTutorial It worked! I tested in my CS5 and worked just like your one did. Amazing! Thx for showing me enlightment, much appreciated... ^_^ Bottom line: IT'S THE SKILL, not software...

  • THANK YOU!

    margin: o;

    padding: o;

    that got my menu to fit in div :)

  • cheese

  • @ssteven3300 search for it at the site.

  • @ssteven3300 of course it does its just html and css. Dreamweaver is a html editor it does nothing to the code apart form display it. go to the website and get the code from there. - James

  • James: my navMenu is vertical. I cannot get it to go horizontal. pls reply.

  • James:

    i have everything right on the navMenu drop down. the only thing missing is that my navMenu is vertical. It is not going horizontal. pls reply. help!

  • @anugal226 try inline-block

  • thanks alot!!!

  • i try to use the dropdown yet it doesn't work,,,i use notepad++ as my editor and google chrome as my browser...does it matter?

  • @moddybanks it makes no difference. go to my site search for article of same name and get the code.

  • @moddybanks It does not matter what editor you use or browser, if the menu is not working then you have missed something somewhere. If the menu had no styling at all then check your link to the css file. If you have some styling but it not looking right then check the css likewise the html. It is easy to miss something.

  • @DreamWeaverTutorial I've used your menu for a site that I am designing and after testing in numerous browsers with really positive results I am finding that the entire thing is screwed up in IE 7 or earlier. The positioning ends up all wrong, the hidden menus will not appear and an annoying border has been placed around my list items. I have replaced the top list item with an image for design sake, but I don't see how this could have such a problematic effect. PLEASE HELP. I'm on a deadline!

  • This menu is simply excellent, but I can't get it to work in versions 6 or earlier of IE. Can anyone provide some insight?

  • Hi James, i tried your drop down menu bar and it worked, the problem is that when i change my screen resolution or zoom in the browser the drop down menu collapse. I think it has a problem with the width that has a value of pixel hope you can solve my problem.

  • @killmeifucan08 hi, once you have decided the width that your menu is going to be just give it a set width on the outer div and that will stop it riding up. - James

  • @DreamWeaverTutorial yeah thats what im doing i set the width of the menu to a lower size and it worked maybe the real problem is with the div thx a lot dude it help me so much... i have a question again, does css drop down menu are better than flash drop down menus?

  • @killmeifucan08 All menus have their good points and bad it all depends on the look you are going for and your target audience. Flash, JavaScript etc much heavier in code than css, they need a good internet connection otherwise there can be a delay in your site loading. If your site takes a long to load your customer may move to the next site on the list.

  • How I can I remove the space between buttons?

  • @srgtfx hi, just removed the border from the menu - James

  • @srgtfx The space between buttons is created by giving padding to the li so just remove this and the buttons should close up.

  • The space between buttons is created by giving padding to the li so just remove this and the buttons should close up.

  • @srgtfx The space between buttons is created by giving padding to the li so just remove this and the buttons should close up.

  • Damn I love you and I'm not gay :P

  • Why is everybody doing this in javascript when it works much better in css?

  • Thank`s for your quick answer. I went to your home page and i copied the code but the drop down list still does´nt show. I write my codes i Notepad++ does it matters? -Tim

  • @HighstoneTim hi, no that would not matter. there must be a problem in your page somewhere. Please email me your whole web page and ill take a look. If you have it online thats even better. Ill send my email address to you in a personal message.

  • Thank for your quick answer. I went to your home page and i copied the code but the drop down list still does´nt show. I write my codes i Notepad++ does it matters? -Tim

  • Hi. I´m a beginner at this, but i did exactly as you, but after writing this: #navMenu ul li: hover ul { visibility: visible;} and when i launch it in IE to test it, it wont work. How shall I do to make it work. Sorry for my bad english. Grateful for answer.

  • @HighstoneTim Hello Highstone, please go to my website and search for the article with the same name as this video tutorial. Once on the page, you will see full code examples for you to copy and paste or compare your code with. - james 

  • Great Tutorial!!! Thanks so much for doing this :)

  • What Doctype would you need for this to work? As when I open it up in firefox everything still appears as a bullet list. But when i open it up in IE9 it seems to work however the dropdown menu doesn't work.

  • @MexicanJumpingLlama I'm using xhtml 1.0 transitional in the video but that wouldn't matter for this tutorial. Go to my website there are full code examples for this menu there. just use the search bar.

  • thanks so much, your a life saver!

  • Great tutorial!

    what if you wanted to use images for the 'master' buttons???

  • Great tutorial but like others have said; the navMenu appears underneath any other content in IE even after setting the z-index. Any suggestions?

  • @MikeGittins yes, remove relative positioning from any div directly below or any div what would be in the location that the dropdown menu operates. IE has a stacking order problem with Z-index

  • Great video! Set up your ecommerce business for free with our Easy Help Zen Cart Tutorials:

  • it works on every browser except explorer( you guessed it right)

  • @mizaniTbd-->use z-index higher than that of the menu...... hope it works...

  • Thank you for this wonderful video, its just what I'm trying to do. I'm stuck at around 8:03 where you change the position of the ul within the main ul to a position of absolute. I've followed your video several times from scratch but when I create #navMenu ul ul { position:absolute; } the list items do not move below the main UL. What could I be doing wrong? I'm using text pad and have linked the css file to my hml page. All previous configs work fine.

  • Ok, this works in fireforx but not IE8.

    Hmm, any suggestions?

  • OK fixed: had to add DOCTYPE in the head in to the html file which I didn't do at first as I was practicing these menus.

    Works now.

  • @Pileyrei I have the same problem, did you find a solution?

  • hi would u mind if u show us how to make side navbar ?thanks

  • dfsafasfdas

  • no it is not for IE, I am using IE 8, for your kind info If I use the banner and the div is as static then it come forward, but the banner is slide show, under slide show it does not work...

  • hi I did as you show but the menu goes back of an image i.e. if I use a banner under the menu then it (menu) does not come Forward to the banner image. if any one has the solution pls give me feed back..... ASAP

  • @mizanITbd The problem is only in internet explorer right?

  • No, It is not IE problem, I am using IE8, if i use static image banner it is ok but if I use slide show banner its goes back.

  • @mizanITbd send me a link to my personal inbox

  • No, It is not IE problem, I am using IE8, if i use static image banner it is ok but if I use slide show banner its goes back.

  • Hi, I added a Z-Index value of 1 to the '#navMenu ul ul' div and viewed it in IE7, seemed to work fine for me. I also checked Google Chrome and Mozilla, they were all OK after I did this. None worked before I added the Z-Index.

    I updated it in the CSS Rule Definition box under positioning.

  • Is there a way to round the corners of the navmenu?

  • How do you split your editor?

    

  • @almldb37 by pressing the split button next to the code and design buttons

  • @DreamWeaverTutorial Ok...Can you help me figure out how to do it in Coffee Cup HTML Editor?

    I'm trying to build a CSS Menu, and it looks like you split your screen (1) for the HTML page and (2) for your CSS page. If I was using Notepad, would I have to just create two separate documents?

  • @almldb37 yes you will need one file for your html and you will need a second file for your css which you will name with an extension of .css . you will need to add a link in the head of your html document pointing towards your css file for the css styles to work in the page.

  • @DreamWeaverTutorial Sweet! Thanks! Love your CSS Menu!

  • hi well done good job-but how can i fix the text navbar didnot look very clear ???

  • Comment removed

  • Awesome got my menu, problem is, i have another div right below it. and for some reason the drop downs from my drop down menu fall behind the second div, and i cannot see them. how can i fix this?

  • @yomexboy This problem only occurs in internet explorer? The only thing you can do here is to set the div which the menu is falling behind to a position that is not relative. Microsoft dont want to spend the time and effort to fix their own coding mistakes, this is a problem that all designers need to watch for

  • This doesn't work in IE8.Please Help!

  • excellent, thank u very much.....

  • im having trouble with the css half of my coding would it be ok if i could send a copy to have a look

  • @claptown247 go ahead ill look at it tomorrow.

  • thanks so much

  • I want to have a vertical dropdown menu, everything in your tutorial has worked thus far apart from when hovering over the part of my menu that I want to have for the drop down part, how do I position the list so that it comes out of the side of the button instead of from the bottom?

  • What is the software name are you using

  • Comment removed

  • What is the wrapper? You didnt do anything with that not even in part 2.

  • Comment removed

  • how would you put the drop down menu into a header?

  • how can you make the borders transparent to the background?

  • Comment removed

  • Sir, How could i create three level horizontal menu in CSS kindly upload video