html - Simulating stackoverflow like Tab effect -


i trying same effect tab in site.

here tried: jsfiddle

i unable desired effect.

can tell me missing.

.mytabs { display: block; height: 24px; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid #ccc; } .mytabs a:hover { border: 1px solid #ccc; border-bottom-color: #fff; } a.youarehere { border: 1px solid #ccc; border-bottom-color: #fff; height: 30px; } 

fiddle

html

<div class="tabs-container">     <nav class="mytabs">         <ul>             <li><a class="youarehere" href="#">menu 1</a></li>             <li><a href="#">menu 2</a></li>             <li><a href="#">menu 3</a></li>         </ul>     </nav> </div> 

css

.tabs-container{     border-bottom: 1px solid #cccccc;     height: 34px;     clear: both;     margin-bottom: 15px;     }  .mytabs ul {     list-style: none;     padding: 0;     margin: 0; }  .mytabs ul li {     display: inline-block; } .mytabs {     border: 1px solid transparent;     color: #777;     display: block;     float: left;     font-size: 90%;     height: 24px;     line-height: 20px;     margin: 9px 8px 0 0;     padding: 0 11px 0 11px;     text-decoration: none;     border-bottom: 1px solid #ccc; } .mytabs a:hover {    border: 1px solid #ccc; } .mytabs a.youarehere {     background: #fff;     border: 1px solid #ccc;     border-bottom-color: #ffffff;     color: black;     font-size: 120%;     height: 30px;     line-height: 28px;     margin-top: 3px;     padding: 0px 11px 0px 11px; } 

Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -