[Starkbier]

Servus Leute,

ich habe ein kleines Problem. Und zwar versuche ich gerade ein responsives Drop-Down-Menu zu coden, bei dem die Menü-Leiste ab einer gewissen Seitenbreite (für Mobilansicht) zum typischen "Aufklapp-Menü-Balken" wird. Dieser Part funktioniert soweit auch.
Allerdings klappt das Untermenü bei mir immer innerhalb des Navigations-Balkens auf und vergrößtert diesen dadurch nach unten.
Setze ich

nav ul li ul {
       position: absolute;
}

Ist das Submenü zwar außerhalb der Menüleiste, aber logischerweise befinden sich die einzelnen Submenüs nicht mehr unterhalb ihres jeweiligen Überpunktes. Zwecks Übersicht habe ich mal nur einen Submenü-Punkt genommen.

Seids bitte gnädig mit mir - blutiger Anfänger hier

Schonmal vielen Dank für die Hilfe!

Hier noch der code:

	<nav>
		<ul>
			<li>
                        <a href="downloads.php">Downloads</a>
                              <ul>
                                    <li>Untermenü<li>
                              </ul>
                        </li>				
                        <li><a href="forum.php">Forum</a></li>
			<li><a href="contact.php">Contact us</a></li>
			<li><a href="">Home ▾</a></li>
			<li><a href="" style="color: orange">Login</a</li>
                </ul>

		<div class="handle">	
			Menu		
		</div>
	</nav>

Noch das Script um das Menü für die Mobilsicht zu ändern.

	
        <script>
		$('.handle').on('click', function(){ 
			$('nav ul').toggleClass('showing');
		});
	</script>

body {
	margin: 0;
	padding: 0;
	background-color: #F2F2F2;
	font-family: 'Yanone Kaffeesatz', sans-serif;
}

nav ul {
	background-color: #34342D;
	overflow: hidden;
	color: white;
	margin: 0px;
	padding-left: 10%;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;

}

nav ul li {
	display: inline-block;
	padding: 15px 15px;
	border-bottom: 3px solid #34342D;
	float: left;
}

nav ul li ul {
        display: none;
}

nav ul li :hover < ul{
        display: block;
        top: 0;
        margin: 0;
        padding
}

@media screen and (max-width: 550px) {
	
	nav ul{
		width: 100%;
		padding-left: 0px;
		text-align: left;
		max-height: 0px;
		border: none;
	}
	
	.showing {
		max-height: 30em;
	}

	.handle {
		display: block;
		float: left;
	}
	
	nav ul li {
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		border: none;
	}	

        nav ul li ul li{
                display: none; 
        }
}

PS: Suchfunktion habe ich bemüt, aber ich kriege es einfach nicht hin mit den gefunden Tipps...