CSS

Working with Navigations Bar in CSS
Previous Home Next

Navigation is the essential requirement for any web site. With CSS you can transform good-looking navigation bars. A navigation bar is basically a list of links, so using the <ul> and <li> elements

<ul>
<li><a href="default.aspx">Home</a></li>
<li><a href="Home.aspx">News</a></li>
<li><a href="contact.aspx">Contact</a></li>
<li><a href="about.aspx">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list-

ul
{
list-style-type:none;
margin:0;
padding:0;
}

 

Vertical Navigation Bar

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Inline List Items

li
{
display:inline;
}

Floating List Items

li
{
float:left;
}
a
{
display:block;
width:60px;
}
Previous Home Next