JS Cleanup and some CSS fuckery

main.js

@@ -1,30 +1,19 @@
 "using strict";
 
-const fruits = [ "Apple"
+const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ], "description":"What it says on the tin." }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ], "description":"Overal genre of the thinky thing" } ];
-               , "Banana"
-               , "Grapefruit"
-               , "Orange"
-               ]
-
-const genres = [ "FPP"
-               , "Action Adventure"
-               , "Lobotomy aka Idlegame"
-               , "Specticle Fighter"
-               ]
-
-//const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ];
-const menus = [{ "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Fruit", "items": ["Banana", "Orange", "Pineapple", "Apple"] }, { "name": "Genre", "items": ["FFP", "Action Adventrue", "Lobotomy aka Idlegame"] }];
 
 const menuContainer = document.getElementById('menu-container');
 
 menus.forEach( menu =>{
     const dropdownMenu = document.createElement('menu');
     const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name});
+    const description = Object.assign(document.createElement('p'), {innerHTML:menu.description});
     const dropdownSelect = document.createElement('select');
 
     dropdownMenu.id = menu.name.toLowerCase();
     dropdownMenu.className = "dropdown-menu";
     dropdownMenu.appendChild(menuTitle)
+    dropdownMenu.appendChild(description)
     menuContainer.appendChild(dropdownMenu)
     dropdownMenu.appendChild(dropdownSelect)
 

style.css

@@ -13,12 +13,29 @@ main{
 	.menu-container{
 		grid-template-columns: 33% 33% 33%;
 	}
+	.dropdown-menu{
+		margin:1em;
+		padding: 3em;
+	}
 }
 
 @media (max-width: 999px) {
 	.menu-container{
 		grid-template-columns: 50% 50%;
 	}
+	.dropdown-menu{
+		margin:1em;
+		padding: 2em;
+	}
+}
+
+@media (max-width: 600px) {
+	.menu-container{
+		grid-template-columns: 100%;
+	}
+	.dropdown-menu{
+		padding: 1em;
+	}
 }
 
 .menu-container{
@@ -30,8 +47,6 @@ main{
 .dropdown-menu{
 	border: black 2pt solid;
 	border-radius: 1em;
-	padding:3em;
-	margin:1em;
 	transition: all 200ms;
 	background-color: #ddd;
 	filter:drop-shadow(7px 5px 4px black);