Ideen oder Coolmenü quer

Hallo alle zusammen, ich baue momentan meine Hp um und möchte jetzt gerne ein Coolmenü einfügen, jedoch finde ich optisch nichts ansprechendes was mir so gut gefällt wenn die Punkte untereinander stehen. Deshalb meine Frage: Kann man den Code umschrieben das die Punkte quer direkt unter den Oberpunkten erscheinen oder gibt es eine Möglichkeit das ich nur für die Unterpunkte einen Hintergrund mache ? (Gerne nehme ich auch andere Ideen entgegen um das ganze besser aussehen zu lassen)

Diesen Code von Success4you verwende ich aktuell:

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 124px;
left: 50%;
margin-left:-405px;
width:905px;
}

.menu li
{
width: 160px;
float: left;
}

.menu a
{
border: 1px solid #292929;
background-color: #999999;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #292929;
}

.menu a:hover
{
background-color: #c5c6c5;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>



<div class="menu">

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menupunkt1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="/tutorials/Menupunkt1.1.htm">Menupunkt1.1</a></li>
<li><a href="/tutorials/Menupunkt1.2.htm">Menupunkt1.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menupunkt2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="/tutorials/Menupunkt2.1.htm">Menupunkt2.1</a></li>
<li><a href="/tutorials/Menupunkt2.2.htm">Menupunkt2.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menupunkt3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="/tutorials/Menupunkt3.1.htm">Menupunkt3.1</a></li>
<li><a href="/tutorials/Menupunkt3.2.htm">Menupunkt3.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menupunkt4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">

<li><a href="/tutorials/Menupunkt4.1.htm">Menupunkt4.1</a></li>
<li><a href="/tutorials/Menupunkt4.2.htm">Menupunkt4.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Menupunkt5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">

<li><a href="/tutorials/Menupunkt5.1.htm">Menupunkt5.1</a></li>
<li><a href="/tutorials/Menupunkt5.2.htm">Menupunkt5.2</a></li>

</ul>
</li>

</div>

So, habe es jetzt so hinbekommen das nur die Unterpunkte den Hintergrund haben.



So alles selber hinbekommen - Closed !