CSS only tab bar with content

CSS only tab bar with content : tab : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » tab »

CSS only tab bar with content


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
<style type="text/css" media="screen">
#navContainer {
    padding: 20px 0 0;
    border-bottom: 1px solid #000000;
    background: #dddddd;
}

#navigation ul {
    padding: 0 0 5px;
}

#navigation li {
    display: inline;
}

#navigation a:link, #navigation a:visited {
    text-decoration: none;
    background: #bbbbbb;
    border: 1px solid #898989;
    padding: 5px 10px;
    position: relative;
    margin-right: 5px;
}

#navigation a:hover {
    text-decoration: underline;
    background: #cccccc;
}

a:link, 
a:visited, 
{
    background: #ffffff;
    border-bottom-color: #ffffff;
}
</style>
</head>
<body id="homePage">
    <div id="masthead">
      <div id="navContainer">
        <div id="navigation">
          <ul>
            <li id="homePageLink"><a href="#">Home page</a></li>
            <li id="servicesPageLink"><a href="#">Services</a></li>
            <li id="customerSupportPageLink"><a href="#">Customer support</a></li>
            <li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
          </ul>
        </div>
      </div>
  </div>
</body>
</html>