LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

CSS Drop down Menu

*Set the video to HD for best viewing experience.
Written by Posted on March 5th, 2013 No Comments
Share This

This is how you make a simple CSS drop down menu.

First, lets go ahead and start with the HTML:

Then the CSS:

 Conclusion:

This is a very simple way to make a CSS drop down menu. I’m using the Pseudo-class and the sibling selector to target the nested ul. ( ul li:hover>ul ) Im setting the ul li with a relative position which allows you to control the nested ul the way you want. I added a padding-right class where I added an arrow to signify there was a drop down.

To find out more about sibling selectors check out this article on child and sibling selectors by Chris Coyier@CSS-Tricks. To find out more about Pseudo-classes check out this article.

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

Massive Menu How to make a Massive Menu
LESS Basics LESS Preprocessor Fundamentals
CSS Font shorthand explained CSS Font Shorthand Explained
Leave a comment

Leave a Reply