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!

How to use Font Awesome Icons How to use Font Awesome Icons
LESS Elements Lets take a look at LESS Elements
Massive Menu How to make a Massive Menu
Leave a comment

Leave a Reply