|
<!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>
<title>Simple Tab Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
background: #bbb;
padding: 10px;
}
#content {
width: 700px;
min-height: 300px;
border: 1px solid #eee;
}
* html #content {
height: 300px;
}
#tab {
line-height: 2em
}
#tab a {
color: #fff;
padding: 0 10px;
border: 1px solid #fff;
text-transform: uppercase;
border-bottom: none;
position: relative;
top: 4px;
height: 20px;
text-decoration: none;
top: 2px;
height: auto;
padding: 3px 10px 4px;
}
#tab a:hover {
background: #bbb
}
#tab a.current {
background: #aaa;
color: #ddd;
}
#subnav {
background: #999;
height: 2em;
color: white;
padding: 5px 5px;
}
#subnav a {
color: white;
text-decoration: none;
}
#subnav a:hover {
color: red
}
</style>
</head>
<body>
<div id="outer">
<div id="tab">
<a class="current" href="#">Home</a>
<a href="#">About us</a>
<a href="#">Contact</a>
<a href="#">links </a>
</div>
<div id="content">
<div id="subnav">
<a href="#">Link 1</a> |
<a href="#">Link 2</a> |
<a href="#">Link 3</a> |
<a href="#">Link 4</a>
</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</body>
</html>
|