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!

css3 transitions CSS3 Transitions
LESS Basics LESS Preprocessor Fundamentals
CSS Font shorthand explained CSS Font Shorthand Explained
Leave a comment

Leave a Reply