Css Tutorials
In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal and vertical navigation menu.
Horizontal Navigation
HTML List (ul li) With Links
Let's start by creating a list with links in HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
ul tags define the whole list and each list element is defined with li tags. Additionally each list item is surrounded with link tag (a). You can have as many as you like. Now the HTML part of the menu is complete.
UL CSS Styling:
body {
background-color: #000;
}
CSS declaration block for ul:
.nav {
list-style-type:none;
list-style-image:none;
margin:0;
background:fuchsia;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
CSS declaration for li:
.nav li{
float:left;
list-style-type:none;
border-right: 1px solid #FF99FF
}
.nav li a{
padding:10px;
text-decoration:none;
background:fuchsia;
color:#fff;
display:block;
}
.nav li a:hover{
background:#FF99FF;
color:#fff;
}
Our horizontal menu is look like this
Vertical Navigation:
UL CSS Styling for vertical menu:
.nav2 {
list-style-type:none;
list-style-image:none;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
margin:0;
padding:0;
}
.nav2 li{
display:list-item;
list-style-type:none;
border-bottom: 1px solid #FF99FF;
width:200px;
margin-bottom:1px;
}
.nav2 li a{
padding:10px;
background:fuchsia;
color:#fff;
text-decoration:none;
display:block;
}
.nav2 li a:hover{
background:#FF99FF;
color:#fff;
}
Our horizontal menu is look like this
