VIDEO TUTORIAL
This is how you make a simple CSS drop down menu.
First, lets go ahead and start with the HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<h1>CSS Dropdown Menu</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#" class="padding-right">Services</a> <ul> <li><a href="#">SEO</a></li> <li><a href="#">Websites</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain</a></li> </ul> </li> <li><a href="#" class="padding-right">Portfolio</a> <ul> <li><a href="#">Blog Site</a></li> <li><a href="#">Restuarant Site</a></li> <li><a href="#">Design Site</a></li> <li><a href="#">Widget Site</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> |
Then the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul { list-style:none; margin:0 } ul li { float:left; position:relative; } ul li a { display:block; padding:10px 20px; border:1px solid #1787cf; background:#064b76; color:#1787cf; } ul li a:hover { background:#1787cf; color:#064b76; } ul li a.padding-right { padding:10px 20px 10px 20px; background: #064b76 url(arrow.png) no-repeat 95% center } ul li a.padding-right:hover { background: #1787cf url(arrow.png) no-repeat 95% center; color:#064b76; } ul li ul{ display:none; } ul li:hover>ul{ display:block; position:absolute; top:43px; left:auto; } ul li ul li a { color:#1787cf; display:block; padding:10px 20px; border:1px solid #064b76; background:#1787cf; color:#064b76; width:100px } ul li ul li a:hover{ background:#064b76; color:#1787cf; } |
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!