dropdown menu

Dobrý den, už jsem psal do JS kategorie o dropdown menu ale od jednoho kodera mi bylo sděleno že JS někdy uživatel nemusí mít zaplý tak pak nevidí vlastně nic, a dal mi odkaz na stránku CSS play, podle které jsem udělal dropdown menu pomocí CSS, jenže já potřebuju mít toto:

Nadpis 1
- pododkaz 1
- pododkaz 2
- pododkaz 3
Nadpis 2
- pododkaz 1
- pododkaz 2
- pododkaz 3

pod najetí na Nadpis 1/2 se zobrazí pododkazy 1-3, jenže Nadpis 2 pokud umístím pod Nadpis 1 tak jakmile najedu na Nadpis 1 tak se mi vše překrývá, prootže v CSS je pevné umístění. Proto jsem se chtěl zeptat jestli na to existuje některé řešení, nebo už pouze JS, Děkuji a přikládám CSS a PHP kód.

CSS kód:

/* Counter Strike - nadpis */
.cs {font-family: arial, sans-serif; width:158px; height:60px; position:relative; padding-left:0px; font-size:11px; margin:0px 0;}
.cs ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFA500; width:158px; height:16px; text-align:center; border:1px solid #FFC600; border-width:0 0 1px 0; background:#444; line-height:16px; font-size:11px;}
.cs ul {padding:0; margin:0;list-style-type: none; }
.cs ul li {float:left; margin-right:1px; position:relative;}
.cs ul li ul {display: none;}

/* Counter Strike - pododkazy */
.cs ul li:hover a {color:#FFC600; background:#555;}
.cs ul li:hover ul {display:block; position:absolute; top:17px; left:0px; width:158px;}
.cs ul li:hover ul li a.hide {background:#555; color:#000;}
.cs ul li:hover ul li:hover a.hide {width:158px;}
.cs ul li:hover ul li ul {display: none;}
.cs ul li:hover ul li a {display:block; background:#444; color:#FFA500; width:158px;}
.cs ul li:hover ul li a:hover {background:#444; color:#FFC600;}
.cs ul li:hover ul li:hover ul {display:block; position:absolute; left:0px; top:0; color:#000;}
.cs ul li:hover ul li:hover ul li a {display:block; width:158px; background:#444; color:#000;}
.cs ul li:hover ul li:hover ul li a:hover {background:#555; color:#fff;}


/* Track Mania - nadpis */
.tm {font-family: arial, sans-serif; width:158px; height:150px; position:relative; padding-left:0px; font-size:11px; margin:0px 0;}
.tm ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFA500; width:158px; height:16px; text-align:center; border:1px solid #FFC600; border-width:0 0 1px 0; background:#444; line-height:16px; font-size:11px;}
.tm ul {padding:0; margin:0;list-style-type: none; }
.tm ul li {float:left; margin-right:1px; position:relative;}
.tm ul li ul {display: none;}

/* Track Mania - pododkazy */
.tm ul li:hover a {color:#FFC600; background:#555;}
.tm ul li:hover ul {display:block; position:absolute; top:17px; left:0px; width:158px;}
.tm ul li:hover ul li a.hide2 {background:#555; color:#000;}
.tm ul li:hover ul li:hover a.hide2 {width:158px;}
.tm ul li:hover ul li ul {display: none;}
.tm ul li:hover ul li a {display:block; background:#444; color:#FFA500; width:158px;}
.tm ul li:hover ul li a:hover {background:#444; color:#FFC600;}
.tm ul li:hover ul li:hover ul {display:block; position:absolute; left:0px; top:0; color:#000;}
.tm ul li:hover ul li:hover ul li a {display:block; width:158px; background:#444; color:#000;}
.tm ul li:hover ul li:hover ul li a:hover {background:#555; color:#fff;}



PHP kód:
<?php
echo "
<div class='cs'>

<ul>
<li><a class='hide' href='#'>Counter Strike</a>

<!--[if lte IE 6]>
<a href='news.php'>Counter Strike
<table><tr><td>
<![endif]-->

<ul>
<li><a href='http://www.game-league.cz/news_cats.php?cat_id=17' title='CS novinky'>Novinky</a></li>
<li><a href='http://www.game-league.cz/servers.php' title='CS servery'>Servery</a></li>

</li>
</ul>
</div
<div class='tm'>
<ul>
<li><a class='hide2' href='#'>Track Mania</a>

<!--[if lte IE 6]>
<a href='news.php'>Track Mania
<table><tr><td>
<![endif]-->

<ul>
<li><a href='http://www.game-league.cz/news_cats.php?cat_id=17' title='TM novinky'>Novinky</a></li>
<li><a href='http://www.game-league.cz/servers.php' title='TM servery'>Servery</a></li>

</li>
</ul>
</div>";
?>

habendorf
Díky moc, funguje to :)