title: Tab function in css?
body: <p>I have the following code &amp; js files are included at top of the page.</p>
  
  <blockquote>
    <p><strong>HTML</strong></p>
  </blockquote>
  
  <pre><code>&lt;ul class="tabs"&gt;
   &lt;li&gt;&lt;a href="#tabr1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#tabr2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#tabr3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
     &lt;div id="tabr1" class="tab-content"&gt;Tab1&lt;/div&gt;
   &lt;div id="tabr2" class="tab-content"&gt;Tab2&lt;/div&gt;
  &lt;div id="tabr3" class="tab-content"&gt;Tab3&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>CSS</strong></p>
  </blockquote>
  
  <pre><code> ul.tabs{
  margin:10px 0 -1px 0;
   padding:0;
  width:100%;
   border-bottom:1px solid #e5e5e5;
   float:left;
    }
  
    ul.tabs li{
  list-style-type:none;
  margin:0 2px 0 0;
  padding:0;
  display:inline-block;
  *display:inline;/*IE ONLY*/
  position:relative;
  top:0;
  left:0;
  *top:1px;/*IE 7 ONLY*/
  zoom:1;
  }
  
  ul.tabs li a{
  text-decoration:none;
  color:#666;
  display:inline-block;
  padding:9px 15px;
  position: relative;
  top:0;
  left:0;
  line-height:100%;
  background:#f5f5f5;
  box-shadow: inset 0px -3px 3px rgba(0,0,0,0.03);
  border:1px solid #e5e5e5;
  border-bottom:0;
  font-size:0.9em;
  zoom:1;
  }
  
  ul.tabs li a:hover{
  background:#fff;
  }
  
  ul.tabs li.current a{
  position:relative;
  top:1px;
  left:0;
  background:#fff;
  box-shadow: none;
  color:#222;
  }
  
  .tab-content{
  border:1px solid #efefef;
  border-left:1px solid #e5e5e5;
  clear:both;
  padding:20px;
  margin:0 0 40px 0;
  }
  </code></pre>
  
  <p>When i use this codes in my program all the tabs are assembling in the same page.  I cant able to hide other tabs when a tab is active.</p>
  
  <p>What will be the reason for this</p>
  
  <p>But i check this in this <a href="http://www.99lime.com/elements/" rel="nofollow">site</a>.</p>
  
  <p>If anyone has any suggestion??</p>