CSS only menu with mouse over
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul#navlist{
margin: 0;
padding: 0;
list-style-type: none;
width:160px;
border:1px solid red;
border-top:2px solid red;
position:absolute;
left:100px;
top:50px;
}
ul#navlist a {
display: block;
width: 100%;
background-color: #aaa;
text-decoration: none;
border-bottom: 2px solid red;
}
ul#navlist a span {
position:absolute;
left:0px;
top:0px;
width:100%;
background-color: #eee;
border-bottom: 1px solid red;
visibility:hidden;
}
ul#navlist li.active a {
background:#ffffcc;
color:red;
border-top:1px solid red;
margin-top:-4px
}
ul#navlist li a:hover {
background: #FFFFcc;
color:black;
visibility:visible
}
</style>
</head>
<body id="page1">
<ul id="navlist">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="">Link 2<span>Link 1</span></a></li>
<li><a href="">Link 3<span>Link 1</span></a></li>
<li><a href="">Link 4<span>Link 1</span></a></li>
<li><a href="">Link 5<span>Link 1</span></a></li>
<li><a href="">Link 6<span>Link 1</span></a></li>
</ul>
</body>
</html>
|
|
|
|
|
HTML code for linking to this page:
Related in same category :
-
-
-
-
-
-
-
-
-
-
-
|
