This is a quick tutorial on achieving a nice, simple menu with rounded corners and a drop down navigation.

See screenshot below and to see what it looks like in action view our demo.

Drop down nav

A drop down menu using css3 is easier than using any JavaScript equivalent. With the obvious benefit of the functionality still working when Javascript is disabled. Although the downside is that CSS3 does not work in IE 6, 7 & 8. Using this menu will, however, work in all the other major browsers:

  • Firefox
  • Chrome
  • Safari
  • Opera
  • IE 9

Start with a div with an id of round this will create the rounded corners then inside the div create an unordered list giving the opening < ul> an id of css-nav, then create the lists you want.

For one that requires a drop down don’t close the </li> tag on the parent list instead open another <ul> tag and then list the drop down menus then add another closing </li> tag to close the parent drop down then carry on as normal till you finished.

Example:

<div id="round">
<ul id="css-nav">
<li><a href="#">Heading1</a></li>
<li><a href="#">Heading2</a></li>
<li><a href="#">Heading3</a>
<ul>
<li><a href="#">Sub Heading</a></li>
<li><a href="#">Sub Heading2</a></li>
<li><a href="#">Sub Heading3</a></li>
</ul>
</li>
<li><a href="#">Heading4</a></li>
<li><a href="#">Heading5</a>
<ul>
<li><a href="#">Sub Heading</a></li>
<li><a href="#">Sub Heading2</a></li>
<li><a href="#">Sub Heading3</a></li>
<li><a href="#">Sub Heading4</a></li>
<li><a href="#">Sub Heading5</a></li>
</ul>
</li>
<li><a href="#">Heading6</a></li>
</ul>
</div>

Now for the CSS 3 to work its magic, add the example to the head of the document. I have commented on what the css effects so you can edit them and play around with the size and colours to suit the needs of your website

Example:

<!--
body {background: #182b3e; }

#css-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
color: #000;
padding-left: 25px;
}

#css-nav li { /* background off list */
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #fff;
}

#css-nav li a { /*li a*/
display: block;
padding: 0 15px;
color: #000;
text-decoration: none;
}

#css-nav li a:hover { /* li hover */
background-color: #26478b;
color: #fff;
}

#css-nav li ul { /*inside ul */
opacity: 0;
position: absolute;
left: 0; width: 8em;
background: #dbdbdb;
list-style-type: none;
padding: 0;
margin: 0;
}

#css-nav li:hover ul { /*Controls drop down opacity*/
opacity: 1;
}

#css-nav li ul li { /*inside ul li keeps background the same width*/
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}

#css-nav li:hover ul li { /*inside ul drop down link height */
height: 30px;
line-height: 30px;
}

#css-nav li ul li a { /*inside ul drop down background colour */
background: #e8e8e8;
}

#css-nav li ul li a:hover { /* inside ul changes background colour on hover */
background-color: #26478b;
}

#round { /* sets 10px rounded corners to the containing div */
margin-left: 50px;
width: 580px;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
-->

You should now have a working drop down navigation.