Doing it with style
An unordered list styled to give a horizontal tabbed list with a central pointer under each link on hover. Works in IE5.5, IE6, Firefox, Opera 8, Mozilla and NN 8. Doesn't work in Mac IE5 (why am I not suprised anymore . . . ho hum).
This menu does not use any images, will resize to fit any link text and will keep the pointer centrally positioned. It was produced whilst helping Sven Glazenburg with his menu problem.
.menu {
padding:0;
margin:0;
list-style-type:none;
white-space:nowrap;
}
.menu li {
float:left;
min-width:100px;
}
.menu a {
position:relative;
display:block;
text-decoration:none;
min-width:100px;
float:left;
}
* html .menu a {
width:100px;
}
.menu a span {
display:block;
color:#000;
background:#c4c4c4;
border:1px solid #fff;
border-width:2px 1px;
text-align:center;
padding:4px 16px;
cursor:pointer;
}
* html .menu a span {
width:100px;
cursor:hand;
w\idth:66px;
}
.menu a b {
display:block;
border-bottom:2px solid #06a;
}
.menu a em {
display:none;
}
.menu a:hover {
background:#fff;
}
.menu a:hover span {
color:#fff;
background:#08c;
}
.menu a:hover em {
display:block;
overflow:hidden;
border:6px solid #06a;
border-color:#06a #fff;
border-width:6px 6px 0 6px;
position:absolute;
left:50%;
margin-left:-6px;
}
<ul class="menu">
<li>
<a href="#nogo">
<b><span>Tab One</span></b><em></em>
</a>
</li>
<li>
<a href="#nogo">
<b><span>Tab Two</span></b><em></em>
</a>
</li>
<li>
<a href="#nogo">
<b><span>Tab Three: Long Tab!!</span></b><em></em>
</a>
</li>
<li>
<a href="#nogo">
<b><span>Tab Four</span></b><em></em>
</a>
</li>
</ul>
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.