Creare un menu a tabs con i css

Posted on 30. Apr, 2006 by Administrator in css, tutorials


Obiettivo
In questo articolo tratteremo come creare un menu stile tabs con i css come in figura:

Codice

<style>

#menu ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#menu li{
display:inline;
border:1px solid #000;
padding: 3px;
margin-left:3px;
margin-bottom:0px;
width:60px;
border-bottom:none;
text-align:center;
}

#menu li#active {
background-color: #cecece;
border-bottom: 1px solid #fff;
margin-bottom: -5px;
}

#linea{
padding-left: 20px;
border:1px solid #000;
border-top:none;
border-left:none;
border-right:none;
}
</style>

<div id=linea>
<div id="menu">
<ul>
<li id="active">uno</li>
<li>due</li>
<li>tre</li>
</ul>
</div>
</div>


Correlati

Leave a reply