A Lower Opacity Black Background Navigation Bar

I would like to share about how to create a navigation bar using css. I will create the navigation with a lower opacity black background.

First of all we need to create the container of our navigation.

#navigation_container{

position: absolute;
width: 500px;
height: 40px;
/* create a centered container */
left: 50%;
margin-left: -250px;
/* -- END -- */

}

Then we need the black background.

#navigation_black{

position: absolute;
width: 100%;
height: 100%;
background-color: BLACK;
z-index: -1; /* set the layer of the container to be lower than other layer */

}

In order to modify the black background to have a lower opacity, we need this css class.

.reduce_opacity{

filter:alpha(opacity=50); /* for IE */
-moz-opacity:0.5; /* for Firefox */
opacity:0.5; /* standard CSS */
-khtml-opacity:0.5; /* for Safari */

}

For the navigation elements, we need a container to centered all the elements in the navigation_container.

#navigation_inner_container{

position: absolute;
height: 100%;
left: 50%;
margin-left: -190px;

}

We will use the hyperlink as the navigation elements. So I change a little properties of the hyperlink tag. I also add a class for the hyperlink.

a{

text-decoration: none;

}

.navigation_element{

float: left;
height: 20px;
line-height: 20px;
padding: 5px;
margin: 5px;
color: WHITE;

}

/* change the background and color of the hyperlink if the cursor is over the hyperlink */
a.navigation_element:hover{

background-color: WHITE;
color: BLACK;

}

This is the html that is inserted in the html.

<div id="navigation_container">

<div id="navigation_black" class="reduce_opacity"></div>
<div id="navigation_inner_container">

<a class="navigation_element" href="">Home</a>
<a class="navigation_element" href="">Product</a>
<a class="navigation_element" href="">Our Client</a>
<a class="navigation_element" href="">About Us</a>
<a class="navigation_element" href="">Contact Us</a>

</div>

</div>

Here is the result page.
Lower Opacity Black Background Navigation Bar