Simple Tab Menu

Simple Tab Menu : tab : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » tab »

Simple Tab Menu


 


<!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>