CSS Dropdown Navigation Menu (part 2)

[ad_1]
In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer. Check out my 9 hour web design video course:

Link to live demo:

Link to download files used in this tutorial:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

16 responses to “CSS Dropdown Navigation Menu (part 2)”

  1. Hashim Hamza Puthiyakath Avatar

    you are nice teacher.

    well planned

  2. BABLU KUMAR Avatar

    Hi there, Thanks for teaching us essential things in CSS.

    Could you help me please with these below problems?:

    1. I want to create a poem website. Here I have around 70 poems. I want to make a website something like: there should be list name of the poems in the left and when I click any of them, should appear in the right.

    2. I also want to hide the content of the poems from the source code. How can I achieve them?

    Warm Regards

  3. Jack Averill Avatar

    Is there a way of doing this that uses the wordpress menu structure? Your navigation menu tutorial used this method and this one only shows you how to manually create each link in the html script, which seems to defeat the object of the first video.

  4. Eric Andrade Avatar

    Just a tip, I hope you don't mind…

    6:02 you could solve it by selecting like this..
    div#nav ul li>a:hover

  5. Ashish Kalmegh Avatar

    Great video.  Thanks for sharing your knowledge 

  6. mohamad kibaly Avatar

    It's really the best CSS traning videos ever!!!
    Subscribed  <3
    I hope to find JS like this from you 🙂

  7. Andrew Voytas Avatar

    I've incorporated your nav bar into one of my websites. I'm going o try to incorporate the responsive mobile code to it. 🙂

  8. Andrew Voytas Avatar

    You're awesome as usual. Here is an awesome challenge for you: add responsive mobile capabilities to your already awesome nav bar. I found this free code that covers it. osvaldas.info/drop-down-navigation-responsive-and-touch-friendly .

  9. Scar Tissue Avatar

    div#nav ul li ul li a…. that's painful to watch considering i can be abit more tidier adding relevant id's. but that's the simplest way of explaining. GREAT videos overall! subscribed.

  10. Steven Harmon Avatar

    Really great vid's! Thank you so much for the simplicity that you put on these and the help you are giving providing them. Many Kudo's!!!

  11. Anita Leung Avatar

    How come changing the background color for #nav ul li a:hover works but not #nav ul li:hover?

  12. GglSux Avatar

    Kudos for an excellent tutorial.
    Perfect in almost every aspect, concept, content and visual presentation are all short simple and clear, but still comprehensive enough for the task at hand.
    And to top that of a very good audio (vocal explanation), again both in content and "style".
    So why not perfect, I , and I'm sure many other viewers would have liked Your videos to be even longer 🙂
    But as I said, all in all damn close to perfect…

  13. LearnWebCode Avatar

    Hey, thanks! I'm glad you liked the video. If you keep learning and practicing it will come just as easily to you too 🙂

  14. LearnWebCode Avatar

    The syntax of CSS is incredibly simple, but things can get terrifying rather quickly when dealing with browser consistency issues and trying to create layouts you aren't familiar with when you're new to the language 🙂

  15. Haltet Kurs Avatar

    A cool vid, thanks! I wish all could create this CSS as easy as you did.

Leave a Reply

Your email address will not be published. Required fields are marked *