The following code to create CSS horizontal menu:
<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>
.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 class="ul">
<li><a class="a" href="index.html">Home</a></li>
<li><a class="a" href="page1.html">Page 1</a></li>
<li><a class="a" href="page2.html">Page 2</a></li>
<li><a class="a" href="page3.html">Page 3</a></li>
</ul>
<li><a class="a" href="index.html">Home</a></li>
<li><a class="a" href="page1.html">Page 1</a></li>
<li><a class="a" href="page2.html">Page 2</a></li>
<li><a class="a" href="page3.html">Page 3</a></li>
</ul>
</body>
"padding:0;margin:0; list-style-type:none;" is to remove bullets."float:left;" is to align the menu items up against each other in horizontal line.
The result can be seen in the menu of:
http://www3.telus.net/jianlu58/
No comments:
Post a Comment