Here is an example of a simple drop down menu style navigation to make your website more awesome.
Drop down menus can be a really exciting and easy way to add functionality and style to your site
First, start with some basic html. You will need to make an unordered list with your main navigation. The ul and its child li have some default styles associated with them that we will address in just a second.
<ul>
<li><a href=”#”> Planes</a></li>
<li><a href=”#”>Trains </a></li>
<li><a href=”#”>Automobiles</a></li>
</ul>
Now add some css styles to make this more of a traditional horizontal nav and remove the default styles.
ul{font-size: 30px;
list-style: none;
height: 53px;
margin: 0;
padding: 0;
float: left;}
li{float: left;
margin:0;
line-height: 53px;
padding: 0 24px 0 24px;
position: relative;}
a{color: black;
text-decoration: none;}
What did we do? For the ul we defined the size of the type. This will cascade over to all of its child elements. In this application we do not want the list-style so define it as none. For now we do not want any margins or padding so define that as none. Float the ul left to keep it from stretching across the screen.
For the li we also float it left to make it horizontal instead of default vertical. Remove default margins. The line-height is set to the height of the parent element which is a trick for centering vertically. Then we add padding to either side to space out the links. Then make sure that this li is relatively positioned. More about that later.
The last thing we did is remove the default attributes of the ‘a’ tag.
This is a pretty basic horizontal nav. From here there is much that can be done like adding background images, playing with fonts, and colors.
Let’s build the drop down portion. Start with your unordered list and add another inside of it.
<ul>
<li><a href=”#”>Planes</a>
<ul>
<li><a href=”#”>1900 – 1940</a></li>
<li><a href=”#”>1940 – 1980</a></li>
<li><a href=”#”>1980 – present</a></li>
</ul></li>
<li><a href=”#”>Trains</a></li>
<li><a href=”#”>Automobiles</a></li>
</ul>
Add the styles to make it work.
ul ul{position: absolute;
display: none;
width: 225px;
top: 53px;
left: 0;}
li:hover > ul{display: block;}
We defined the sub ul to be positioned absolutely that way it is removed from the normal flow of content. This is why we set the first li to be positioned relatively because it becomes the container by which the absolutely positioned element is set to. Then to ensure the sub ul is invisible until it is needed we set the display to none. The width is optional and if we wanted to add a background image we may want a different number. We set the Top to be 53px which puts our sub ul just below our first ul which has a height of 53px. Left we keep at 0 because we want it to be positioned to the left side.
Now we define the hover state and bring it all together. li:hover > ul says:”When the mouse hovers over a li any ul within that li will be displayed: block”. This makes our ul visible while the mouse is over it.
It is really that simple. Remember this is as basic as it gets. There is so much more we could do with this.
I hope this helps any newbies out there.
Ryan Shuhart
Sr. Web Developer – Tranquilblue
June 3, 2013
