CSS Navigation Menu

[Surya100]

Hi Friends,

how to create horizontal navigation menu using Html Lists and CSS? which attribute can i use for Horizontal List in Css?



Thanks
surya

[megabyte]

you can create navigation menu using Html list.For Example


HTML Code :

<ul id="menu">
<li id="Current"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul> 

CSS style for Menu for Vertical)

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

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

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




CSS style for Menu for Horizontal )

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

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

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


try this


Thanks
megabyte

[Sam Jepsum]

Make sure you preview your code in several browsers.. the code given will barf in IE.

[poojadreams]

It works fine in latest browsers. Check out once in IE6 and IE7