In this article we will learn how to create a simple drop-down menu using CSS3 only.
I don't think if anybody isn't familiar with a drop-down menu. But if you don't know about drop-down menu, then this is a navigation bar on the top of web pages with some DROP-DOWN effect just like this one:
Now just look at this HTML code:
I don't think if anybody isn't familiar with a drop-down menu. But if you don't know about drop-down menu, then this is a navigation bar on the top of web pages with some DROP-DOWN effect just like this one:
 |
| http://goo.gl/KTlvkM |
Now just look at this HTML code:
<ul id="top-menu">
<li><a href="#">Languages</a>
<ul>
<li><a href="#">Ruby</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">C++</a></li>
</ul>
</li>
<li><a href="#">Browsers</a>
<ul>
<li><a href="#">Chrome</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">IE</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
</ul>
</li>
<li><a href="#">Operation systems</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Linux</a></li>
<li><a href="#">FreeBSD</a></li>
<li><a href="#">Mac OS</a></li>
</ul>
</li>
<li><a href="#">Others</a></li>
</ul>
This will create simple looking nested lists, looking like this:
These are just multi level lists. Drop-Down menus are created using lists. CSS converts this multi-level lists into a drop down menu.
Let's look at the CSS. This CSS is divided into several groups. Each group has its own functionality.
Look at this code snippet:
#top-menu, li ul {
list-style: none;
margin: 0px;
padding: 0px;
}
 |
| The above CSS code has removed all bullets and aligned them in single line. |
Now we need to align the main menu (Language, Browser, Operation Systems and Others) into a single line.
#top-menu li {
float: left;
position: relative;
}
#top-menu li a {
display: block;
}
 |
| Above CSS code aligned the main menu in the single row on left |
To place a sub menu item over the main menu item you must apply position: absolute; property to that sub menu item:
#top-menu li ul {
position: absolute;
}
Applying the above CSS will align the sub menu items under the main menu vertically.
Now this is the main part of the drop down menu. Now we have to write the code that will change all these menus in such a ways that, when we hover over some main menu item, the corresponding drop down menu should appear, otherwise it should be hidden under that main menu entry.
#top-menu li ul {
visibility: hidden;
}
#top-menu li:hover ul {
visibility: visible;
}
The first block of the above code is to hide the sub-menu entries in the normal position. The second part will be executed when we hove over the main menu options. It will show its effect if the main menu entry has some sub-menu underneath. When we hove over that entry, the corresponding sub menu entry will be shown in the drop down. You can apply padding to to make the entries separate to look readable.
Below pen shows the output and the code as well.
