Forum : css horizontal menus
Brief description  about Online courses   join in Online courses
View Siddiqui Nadeem Ahmed 's Profile

css horizontal menus

i need to know how to get css horisontal menus can anybody tell me how to do it
Asked by Siddiqui Nadeem Ahmed | Jul 19, 2010 |  Reply now
Replies (1)
View teacher siliconindia 's Profile
Hi
Try this code hope this will help you

<html>
<head>

<title>Untitled Document</title>

<style type="text/css">

#homebutton{
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
width:600px;
margin-bottom:5px;
}

#homebutton ul{
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
width:600px;
margin-bottom:5px;
}

#homebutton ul li{
list-style-type:none;
width:200px;
display:block;
width:200px;
height:40px;
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
margin-bottom:5px; float:left;
}

#homebutton ul li a{
list-style-type:none;
display:block;
width:200px;
height:40px;
font-size:15px;
background-color: #FFCC00;
font-family: Arial, Helvetica, sans-serif;
width:200px;
margin:0px;
padding:0px;
color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}

#homebutton ul li a:hover{
list-style-type:none;
display:block;
width:200px;
height:40px;
font-size:15px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}

#homebutton ul li #active{
list-style-type:none;
width:200px;
display:block;
height:40px;
font-size:15px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
padding:0px; color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}




</style>



</head>

<body>


<div id="homebutton">
<ul>
<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5" id="active">About us </a></li>

<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5">Services </a></li>

<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5">Contact us </a></li>


</ul>

</div>



</body>
</html>


Regards
Jul 20, 2010