Tab Menu

Tab Menu : Menu : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » 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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
ul.tabs a {
  display: block;
  text-decoration: none;
}

ul.tabs {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid gold;
  margin-bottom: 10px;
}

ul.tabs li {
  float: left;
  width: 25%;
  list-style-type: none;
}

ul.tabs * .tab-label {
  border: 1px solid black;
  margin: 0;
  padding-bottom: 2px;
  padding-top: 2px;
  text-align: center;
  background: pink;
}

ul.tabs li.selected * .tab-label {
  position: relative;
  border-bottom: none;
  top: 1px;
  padding-bottom: 4px;
  padding-top: 5px;
  border-top: 2px solid gold;
  margin-top: -5px;
  font-weight: bold;
  background: red;
}

</style>
</head>
<body>
    <ul class="tabs"> 
        <li class="selected"><h3 class="tab-label"><a href="">Tab 1</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 2</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 3</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 4</a></h3></li> 
    </ul> 
</body>
</html>