Horizontal CSS menu

1. Let’s begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers.
2. Our menu is actually an unordered list element <ul> styled using CSS. So, in the body section of cssmenu.html put the following HTML code:

<ul>
<li><a href=”#”>Css</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>ActionScript</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>SQL Server </a></li>
<li><a href=”#”>PHP</a></li>
</ul>

3. Great now, we have the list, let’s stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code:

In the code above the ul list-style-type was set to none (so we have no bullet before each list element).
For having no line break between list element we set for li display property to inline.
For the a element float was set to left left and some other properties was changed for a good-looking menu. For the a element background was set to #999900 and for hover pseudo-class of the a element background was set to #CCCC00.

The HTML and CSS complete code is below:

<html>
<head>
<style type=”text/css”>
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS horizontal menu</title>
</head>

<body>
<ul>
<li><a href=”#”>Css</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>ActionScript</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>SQL Server </a></li>
<li><a href=”#”>PHP</a></li>
</ul>
</body>
</html>
Hope this tutorial was helpful!

Scripts

Leave a Reply