Abstand problem mit zwei Listen

[Dendem]

Wie der Titel schon verrät habe ich ein problem mit dem Abstand von 2 Listen.
auf BJC-Buchen kann man auf der linken Seite ein Menü erkennen dabei sind es zwei Listen, die erste Liste ist nur das "verein" und die andere ist der rest, da ich es nicht hinbekommen habe, die beiden Submenüs so anzuordnen wie ich das will, hab ich ein clear-div zwischen beiden listen benutzt, so jetzt ist mein problem das, dass der abstand zwischen "verein" und der restlichen Liste zu groß ist.
html-code der Listen

<ul onmouseout="h3()" class="main">
<li  onmouseover="show1()"><a href="#">Verein   ></a></li>
</ul>
<div onmouseover="show1()" onmouseout="h1()" id="div1">
<ul class="secnav">
<li><a href="#">Vorstandschaft</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Mitgliedschaft</a></li>
<li><a href="#">Erfolge</a></li>
</ul>
</div>
<div class="clear"></div>
<ul onmouseout="h3()" class="main2">
<li onmouseover="show2()"><a href="#">Mannschaften    ></a></li>

<li><a href="#">Galerie</a></li>
<li><a href="#">Archiv</a></li>
<li><a href="#">Links</a></li>
</ul>

<div onmouseover="show2()" onmouseout="h2()" id="div2">
<ul class="secnav2">
<li><a href="#">Herren</a></li>
<li><a href="#">Jugend</a></li>
<li><a href="#">Schüler</a></li>
<li><a href="#">Mädchen</a></li>
</ul>
</div>
</body>
<script language="javascript">
function init() {
document.getElementById("div1").style.visibility = "hidden"
document.getElementById("div2").style.visibility = "hidden"

}
function show1() { 
document.getElementById("div1").style.visibility = "visible"
document.getElementById("div1").style.display = "block"
}
function show2() {
document.getElementById("div2").style.visibility = "visible"
}
function h1()  {
document.getElementById("div1").style.visibility = "hidden"
document.getElementById("div1").style.display = "none"
}
function h2() {
document.getElementById("div2").style.visibility = "hidden"
}
function h3() {
document.getElementById("div2").style.visibility = "hidden"
document.getElementById("div1").style.visibility = "hidden"
document.getElementById("div1").style.display = "none"
}

</script>
</html>

css-code der Listen

.main {
width: 175px;
height: 30px;
list-style: none;
margin: 0px;
padding-left: 10px;
padding-top: 30px;
padding-bottom: 0px;

float: left;
}

.main li {
background-image: url(Button.png);
background-repeat: no-repeat;
height: 24px;
width: 175px;
padding-top: 4px;
text-align: center;
margin: 0px;
}



.main li a {
display:block;
text-decoration: none;
height: 24px;
width: 175px;
color: white;
text-align: center;
margin:0px;
}

.main li:hover {
background-image: url(Button-h.png);
}


/*----------------------------------------------------------*/
.main2 {
width: 175px;
list-style: none;
margin: 0px;
padding-left: 10px;
padding-top: 0px;
float: left;
}

.main2 li {
background-image: url(Button.png);
background-repeat: no-repeat;
height: 24px;
width: 175px;
padding-top: 4px;
text-align: center;
margin: 0px;
}



.main2 li a {
display:block;
text-decoration: none;
height: 24px;
width: 175px;
color: white;
text-align: center;
margin:0px;
}

.main2 li:hover {
background-image: url(Button-h.png);
}

Css-code der Untermenüs

.secnav {

list-style: none;
margin:0px;
width: 110px;
height: 106px;
padding-left: 185px;
padding-top: 30px;

}
.secnav2 {
padding-left: 185px;
padding-top: 0px;
list-style: none;

margin:0px;
width: 110px;
height: 106px;

}
.secnav li {
padding-top: 4px;
height: 24px;
width: 110px;
margin:0px;
text-align:center;
background-image: url(Submen.png);
background-repeat: no-repeat;
}

.secnav li:hover {
text-decoration: underline;
}
.secnav li a {
padding-bottom: 1px;
display:block;
height:24px;
width: 110px;
text-decoration: none;
color: black;
}
.secnav2 li {
padding-top: 4px;
height: 24px;
width: 110px;
margin:0px;
text-align:center;
background-image: url(Submen.png);
background-repeat: no-repeat;
}

.secnav2 li:hover {
text-decoration: underline;
}
.secnav2 li a {
padding-bottom: 1px;
display:block;
height:24px;
width: 110px;
text-decoration: none;
color: black;
}

Ich hab schon alles ausprobiert, was mir nur eingefallen ist, nur geholfen aht das nichts.
Danke schonmal an alle im Vorraus.

MfG Dennis

 

[Cheffchen]

Hallo,

es liegt an .main {height: 30px;} das schiebt das nach unten, mach mal 25 oder 200 draus dann siehstm das.

Mir scheint das auch alles etwas komisch zu sein was machst da mit dem clear-div mitten im menü, also Schematisch ist das so wieso falsch oder zumindest sehr verschachtelt und dann noch javascript zwischen was auch nicht brauch.
mach doch mal google an und such nach css menü da bekommst 100te die Funktionieren, entweder gleich eins nehmen oder anschauen wie die das gemacht haben :O).

Cheffchen

 

[Dendem]

Ich weiß, dass es viele schon fertige Deinge gibt, will aber dass das Projekt 100% von mir gemacht ist, aber mal schauen wie die das machen kann ich
Danke dir

 

[Cheffchen]

Hallo,

die Idee ist ja löblich aber wenn das alleine machen möchtest dann denk dran das so ein Menü komplett ohne javascript auskommt und das 1 Menü 1 ul liste ist die nicht mal so unterbrochen wird, das gehört sich einfach nicht :O).

Cheffchen

 

[devilseye]

hi ähm nur so ein kleiner Tipp:
Solange du weisst was das Script oder was auch immer, verursacht. Solltest du das Rad nicht jedes mal neu erfinden.