Saturday, August 17, 2013

CSS display horizontal menu

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Member</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


</p>

</body>
</html>

Result


No comments: