index.php

@@ -26,16 +26,31 @@ if ($tab == "") {$tab = "home";}
               Mellys Weihnachts Kalender
         </h1>
     </header>
+    
+    <!-- mobil sass--->
     <input class="side-menu" type="checkbox" id="side-menu"/>
     <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
+    <!-- mobil sass ende --->
     <nav>
 		<ul>
 			<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>
 			<li><a href="?tab=galerie" <?php if ($tab == "galerie")?>>Galerie</a></li>
 			<li><a href="?tab=radio" <?php if ($tab == "radio")?>>Musik</a></li>
 				</li>
-		     </ul>
-		</nav>
+			<li class="mainMenu"><a href="#">Test</a>
+				<ul class="submenu">
+				    <li><a href="#">Spiel</a></li>
+				        <li><a href="#">Rang</a></li>
+				</ul>
+			</li>
+			<li class="mainMenu"><a href="#">Test2</a>
+				<ul class="submenu">
+				    <li><a href="#">Spiel</a></li>
+				        <li><a href="#">Rang</a></li>
+				</ul>
+			</li>
+		</ul>
+	</nav>
 
 		<script type="text/javascript">
 			$(".mainMenu > a").mouseover(function(){

src/sass/_mobil.sass

@@ -9,14 +9,14 @@ $ulBorderM: 3px ridge darkgreen
         height: 50%
         position: absolute 
         //float: none
-        background-color: #fff
-        max-height: 0
-        transition: all 0.4s ease-in
-        border-left: $ulBorderM
-        border-right: $ulBorderM
+        //background-color: #fff
+        max-width: 0
+        transition: all 0.3s ease-in-out
+        //border: $ulBorderM
         border-radius: 2rem
         overflow: hidden
         right: 0
+        //display: none
         
 
         ul
@@ -24,7 +24,7 @@ $ulBorderM: 3px ridge darkgreen
             background: none
             border: none
             box-shadow: none
-            
+            display: none 
 
         li
             float: none
@@ -100,9 +100,14 @@ $ulBorderM: 3px ridge darkgreen
 
     .side-menu:checked ~
         nav
-            max-height: 100%
-            border-top: $ulBorderM
-            border-bottom: $ulBorderM
+            max-width: 100%
+            display: block
+            border: $ulBorderM
+            border-right: none
+            background: #fff
+            
+            ul
+                display: inline-block 
             
 
         .hamb .hamb-line