chcem si dat na stranku toto:
http://www.cssplay.co.uk/menus/tab_overlap.html
no chcem aby sa v tych popisnych textoch zobrazovali odkazy... no ked si ich tam da tak sa ten odkaz zaradi medzi tie zalozky... ako to opatrit aby sa zobrazovall v tom riadku?
kod je asi takyto...
Kód:
<style type="text/css">
.tabs {padding:10px 0 0 10px; margin:40px 10px 0 0; list-style:none; height:26px; background:#dee; border:1px solid #000; position:relative;}
.tabs li {float:left; margin-right:-4px; margin-bottom:-1px;}
.tabs li a {display:block; text-decoration:none; font-size:11px; font-family:verdana, arial, sans-serif; line-height:23px;}
.tabs li a em {display:block; float:left; height:25px;text-align:center; padding:0 15px; background:#488; border:1px solid #000; border-right:0; font-style:normal; color:#fff;}
.tabs li a span {display:none;}
.tabs li a b {position:relative; display:block; float:left; z-index:100; border-bottom:1px solid #000; width:2px; background:url(tab.gif);}
.tabs li a b.p1 {height:25px; margin-top:1px;}
.tabs li a b.p2 {height:23px; margin-top:3px;}
.tabs li a b.p3 {height:21px; margin-top:5px;}
.tabs li a b.p4 {height:19px; margin-top:7px;}
.tabs li a b.p5 {height:18px; width:1px; background:#000; margin-top:9px; font-size:1px; line-height:0; border:0;}
.tabs li a:hover {color:#000; white-space:normal;}
.tabs li a:hover em {background:#9bb; color:#000; cursor:pointer; border-bottom-color:#9bb; position:relative; z-index:300;}
.tabs li a.selected em {background:#9bb; color:#000; border-bottom-color:#9bb; text-decoration:none; position:relative; z-index:400;}
.tabs li a.selected:hover em {cursor:default;}
.tabs li a.selected:hover b {cursor:default;}
.tabs li a.selected b {z-index:400; background-position:0 -33px; border-bottom-color:#9bb; cursor:pointer;}
.tabs li a:hover b {background-position:0 -33px; border-bottom-color:#9bb; cursor:pointer;}
.tabs li a:hover b.p5, .menu li a.selected b.p5 {background:#000;}
.tabs li a:hover span {display:block; position:absolute; left:10px; top:35px; color:#000; white-space:nowrap;}
.tabs li a.selected:hover span {display:none;}
.message {background:#9bb; border:1px solid #000; border-top:0; text-align:right; padding:5px 10px; margin:0 10px 50px 0; color:#fff; font-size:10px;}
.message a {background:#9bb; color:#000; border-bottom-color:#9bb; text-decoration:none; position:relative; z-index:400;}
</style>
Kód:
<ul class="tabs">
<li><a href="#nogo" class="selected"><em>home</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>Hlavná stránka.</span></a></li>
<li><a href="#nogo"><em>lyfestyle</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b></a><span><a href="lyfestyle/hudba.html" >hudba</a></span></li>
<li><a href="#nogo"><em>charts</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>Who we are. What we do and where to find us.</span></a></li>
<li><a href="#nogo"><em>hobby</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>Methods of getting in touch, including an online contact form and various email addresses.</span></a></li>
<li><a href="#nogo"><em>download</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>See what we do with the information we gather on this site.</span></a></li>
<li><a href="#nogo"><em>funny</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>Links to all the great websites out there on the World Wide Web</span></a></li>
<li><a href="#nogo"><em>recenzie</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>See what we do with the information we gather on this site.</span></a></li>
<li><a href="#nogo"><em>g-book</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>See what we do with the information we gather on this site.</span></a></li>
<li><a href="#nogo"><em>kontakt</em><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><span>See what we do with the information we gather on this site.</span></a></li>
</ul>
<div class="message">menu</div>