When you are creating a CSS/HTML page, you will definitely want navigational elements in that web page. The most common way to create navigational elements is through CSS styled lists. But you should remember one simple thing – your navigational elements should contain display: block.

The display: block property is very essential in CSS navigation because navigation buttons and areas are absolutely meant to be like buttons or blocks of the web page. In case you leave the links in your navigation as display: inline; (default for elements), then only the text area in your navigation will become clickable.

To get the best results, add horizontal navigation menu and vertical navigation menu that will help your pages to become more accessible while remaining compliant to standards.

Horizontal Navigation Menu

To create horizontal menu, start with the outside and work in. if you want your navigation to start in left corner, you need to set it with 0 left margin and padding, an float it to the left.

ul#navigation {
    float: left
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #039;
}

But the main magic in horizontal navigation menu lies in its list items. List items are normally block elements, which means that they will have new line placed before and after each one. By switching the display from block to inline, you can force the list elements to queue up next to one another.

ul#navigation li {display: inline;}

A top border can also be added to delineate the buttons when they are hovered over:

ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em lem;
    border-bottom: solid 1px  #39f;
    border-top: solid 1px #39f;
    border-right: solid 1px #39f;
}

a:link, a:visited {color: #fff;}

ul#navigation li a:hover {
    background-color: #fff;
    color: #000;
}

Vertical Navigation Menu

It is same as creating the horizontal navigation menu. The first move in such creation is to define the width of the menu. This will ensure that even if the menu items are long, they will not push the rest of the layout over or cause horizontal scrolling.

ul#navigation {width: 12em;}

Once the width is set, other things like list-style [get rid off the bullets], borders, text alignment, margins and background colors.

ul#navigation li {
    list-style: none;
    background-color: #039;
    border-top: solid 1px #039;
    text-align: left;
    margin: 0;
}

Once the basics for the list items are set, you can start playing with how the menu looks like in the links area. Firstly, you should style the ul#navigation li a, then the a:link, a:visited, a:active, and a:hover (if you want them). For the a:links, let it be made block element rather than default in-line. This forces them to take up the entire space of the li – and they act more like a paragraph, which makes them easier to style as menu buttons. The other best things that can be done are removing the underline (text0-decoration: none) as this makes the buttons look more like buttons.

Following are the codes:

ul#navigation li a {
    display: block;
    text-decoration: none;
    padding: .25em;
    border-bottom: solid 1px #39f;
    border-right: solid 1px #39f;
}

With the display block, you can set on the a:links, and the entire box of the menu item becomes clickable, and not just the letters. Make sure that you set the link colors (link, visited, active and hover), if you want them to be different than the default blue, purple and red.

a:link, a:visited {color: #fff;}
a:hover, a:active {color: #000;}

To pay some extra attention to the hover state, do the following:

a:hover {background-color: #fff;}