Tutorials HTML/CSS Drop-Down Menus

Drop-Down Menus

This tutorial will teach you how to create a nested drop-down menu. There are two ways to do this; you can use JavaScript or CSS. This tutorial will use the CSS method because it is easier to create.

HTML Code

For the HTML, all you need is a nested list.

<ul id="menu">  <li><a href="index.html">Home</a></li>  <li><a href="about.html">About Us</a>    <ul>      <li><a href="products.html">Products</a></li>      <li><a href="locations.html">Locations</a></li>      <li><a href="contact.html">Contact Us</a></li>    </ul>  </li>  <li><a href="services.html">Services</a>    <ul>      <li><a href="economy.html">Economy</a></li>      <li><a href="first.html">First Class</a></li>      <li><a href="business.html">Business</a></li>      <li><a href="cargo.html">Cargo Hold</a></li>    </ul>  </li>  <li><a href="blog.html">Blog</a></li></ul>

CSS Code

The CSS code is very simple. All you have to do is hide the children menu and show it when someone hovers over its parent. This code is the bare minimum you need to make a functional drop-down menu.

ul#menu li ul {  display:none;}ul#menu li:hover ul {  display:block;  position:absolute;}

Stylizing the Menu

The menu looks crude so we should add a little bit more to make it nicer. A few more lines of code will turn it into a nice horizontal menu with a vertical drop-down. A bit more spacing between the links would make it easier to read.

ul#menu {  clear:both;}ul#menu, ul#menu li ul {  margin:0;  padding:0;}ul#menu li {  float:left;  list-style:none;  margin:0 10px;}ul#menu li ul {  display:none;}ul#menu li:hover ul {  display:block;  position:absolute;}ul#menu li ul li {  margin:0;  float:none;}

Download the menu

For all of you who can't get it to work and want a working sample, I've provided a download link: Download

That's all for this tutorial. Obviously this is still a very primitive menu, so you can stylize it to suit your needs. Have fun and see you next time on PHP Trainee.

Posted by on . Category: HTML/CSS


Comments

No comments posted yet

You need to register or login to post new comments.