Maybe it's time to revamp your website navigation, or maybe you just want to create a new look and feel. Is your navigation and interface system user friendly? Or do your visitors get bogged down steering through your website? This tutorial will help you create a new navigation with drop-down menus on your website using pure CSS3 technology to build a user friendly interface and improved user experience — all this too without using any JavaScript and minimal use of images.

The power of CSS3 makes it possible for us to create some robust navigation and drop-down menus that are useful across most browsers. The step by step process will include building the navigation bar in HTML, and then adding containers with some CSS3 styling, then styling the menu items, and coding the drop-down menus and their associated styling. Then we will look at several column variations on the theme to round out the lesson.

The navigation bar

First we will build out our demonstration navigation menu bar using an unordered list defined in the HTML which will be inside the HTML5 <nav> container and we will give the unordered list an id="nav_menu":

The example in its unstyled form looks like this as displayed in Chrome 16.0.912.63 m:

Figure A

And now for our first CSS3 styling, we will define a list-style which is set to none; a fixed width of 800px, which gets centered through setting the left and right margins to "auto"; a height of 60px; and the left and right padding set to 40px each.

#nav_menu {

list-style:none;

width:800px;

margin:40px auto 0px auto;

height:60px;

padding:0px 40px 0px 40px;

Now let's add a background color and a gradient to the stylesheet using moz, webkit, o, and ms prefixes, along with a filter for IE6-9. The first background indicated is the fallback color for older browsers, and then we define the gradients with a top down vertical color using the two colors, #b0b1d8 and #0e0f09.

Figure C

Menu list items styling

Next we will add styling to the menu list items so that they are evenly spaced across the navigation menu bar using alignment, margins, and padding, and starting with the menu list items.

#nav_menu li {

float:left;

display:block;

text-align:center;

position:relative;

padding: 8px 20px 8px 20px;

margin-right:30px;

margin-top:10px;

border:none;

}

Our navigation menu bar is starting to take better shape now as displayed in both Dreamweaver's preview pane at the top and in Chrome 16.0.912.63 m on the bottom in Figure D:

Figure D

Next we will establish a hover state for the menu items and drop down lists adding a light slate color scheme using HEX #778899 as the base and a gradient to HEX #EDF1F5. Starting with a 1px solid border color HEX #566370, padding with 19px for the left side to compensate for the 1px border, and then adding the linear-gradient (with prefixes for moz, webkit, o, and ms) with a border-radius of 7px for the top left and top right sides only, we create the rounded corners for a tabbed effect surrounding each list on hover.

The result with the background and radius styling added is displayed below in Chrome 16.0.912.63 m:

Figure E

Next we will style the menu list item anchors:

font family of Trebuchet MS, Helvetica, sans-serif with small caps font variant

font size of 16px and font weight of 300

HEX #EDF1F5 color

set the display to block

text decoration to none

text shadow.

#nav_menu li a {

font-family:'Trebuchet MS', Helvetica, sans-serif;

font-variant: small-caps;

font-size:16px;

font-weight:600;

color: #EDF1F5;

display:block;

outline:0;

text-decoration:none;

text-shadow: 2px 1px 1px #000;

}

The result with the menu list anchor styling added is displayed below in Chrome 16.0.912.63 m:

Figure F

Next, we will add a menu list anchor hover effect which will make the color darker and change the shadow color to HEX #99ACC2, which is a slight variant on the light slate color.

#nav_menu li:hover a {

color:#323438;

text-shadow: 2px 1px 1px #99ACC2;

}

The result with the menu list hover styling added is displayed below in Chrome 16.0.912.63 m:

Figure G

Next, we will add a drop-down arrow image for the menu list and for the list on hover, adding in a slight shadow effect on mouse hover; the right padding of 20px ensures that the image is placed to the right side of the menu item text.

In the next segment of this tutorial, we well add in the drop down menu content and styling creating the general structure using containers, along with the option for either one or multiple columns of content, and styling.

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Full Bio

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.