Ich suche schon seit Stunden nach einer Lösung und glaube ich werde langsam blind.
Folgendes Problem:
Ich habe ein verschachteltes ul li ul Menu und wenn die zweite Ebene angezeigt wird, wird diese über die li's der ersten Ebene gelegt, anstatt die li's der ersten Ebene nach unten zu verschieben.
<html>
<head>
<style>
* {padding:0;margin:0}
.nav_menu{width:200px;height:690px;padding-top:40px;float:left;}
.nav_menu ul{display:block;margin:0;background-color:#fff;position:relative;}
.nav_menu ul li{height:20px;background:url("tl_files/axxeva.de/img/navline0.png") left bottom no-repeat;text-decoration:none;font-size:12px;line-height:20px;list-style: none;}
.nav_menu ul li.submenu{font-weight:bold;}
.nav_menu ul li ul{display:none;margin:0;}
.nav_menu ul li.active ul,.nav_menu li.trail ul{position:absolute;display:block;}
.nav_menu ul li.active ul li,.nav_menu ul li.trail ul li,.nav_menu ul li.trail span.active{background-image:none;font-weight:normal;text-decoration:none;}
.nav_menu ul li.trail ul li,.nav_menu ul li.trail span.active{padding-left:10px;background-image:none;}
.nav_menu ul li a{padding-left:10px;text-decoration:none;font-size:12px;color:#000;line-height:20px;}
.nav_menu ul li.active{width:190px;padding-left:10px;background-color:#530A20;text-decoration:none;font-size:12px;color:#fff;line-height:20px;}
</style>
</head>
<body>
<div class="mod_navigation nav_menu block">
<ul class="level_1">
<li class="sibling first"><a href="/" class="sibling first">Maintitle 1</a> </li>
<li class="active submenu"><span class="active submenu">Submenu 1</span>
<ul class="level_2">
<li class="first"><a href="#" class="first">Subtitle 1</a></li>
<li><a href="#">Subtitle 2</a></li>
<li><a href="#">Subtitle 3</a></li>
<li><a href="#">Subtitle 4</a></li>
<li class="last"><a href="# class="last">Subtitle 5</a></li>
</ul>
</li>
<li class="sibling"><a href="#" class="sibling">Maintitle 2</a></li>
<li class="submenu sibling last"><a href="#" class="submenu sibling last">Submenu 2</a>
<ul class="level_2">
<li class="first"><a href="#" class="first">Subtitle 1</a></li>
<li><a href="#">Subtitle 2</a></li>
<li><a href="#">Subtitle 3</a></li>
<li><a href="#">Subtitle 4</a></li>
<li><a href="#">Subtitle 5</a></li>
<li class="last"><a href="#" class="last">Subtitle 6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Ja ich weiss etwas viele class Definationen, doch diese sind größtenteils Standard-Contao-Definationen für ein ul-menu.
Ich danke für jede Hilfe im voraus!
Gruß Michel