polished up settings

atoms/index.css

@@ -41,6 +41,46 @@ td:hover {
 	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
 }
 
+.desc {
+	font-size: 150%;
+}
+
+.option {
+	position: relative;
+	display: inline-block;
+	font-size: 130%;
+}
+
+.dropdown {
+	display:flex;
+	opacity: 0;
+	position: absolute;
+	box-shadow: 4px 4px 3px #444;
+
+	-webkit-transition: opacity 0.3s ease;  
+	-moz-transition: opacity 0.3s ease; 
+	-ms-transition: opacity 0.3s ease;
+	transition: opacity 0.3s ease;
+}
+
+.dropdown p {
+	color: black;
+	margin:0;
+	background-color:#fff;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    z-index:50;
+
+    -webkit-transition: background-color 0.3s ease;  
+	-moz-transition: background-color 0.3s ease; 
+	-ms-transition: background-color 0.3s ease;
+	transition: background-color 0.3s ease; 
+}
+.dropdown p:hover {
+	background-color:#CECDCD;
+}
+
 .tDesc {
 	padding: 0;
 	margin: 0;
@@ -83,7 +123,7 @@ td:hover {
 	min-height: 100%;
 	padding: 15px 20px 15px 15px;
 	box-shadow: 2px 2px 5px 3px #333;
-	z-index:10;
+	z-index:5;
 
 	-webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
 	-moz-transition: margin 0.5s ease, background-color 0.5s ease; 

atoms/index.html

@@ -17,7 +17,11 @@
 		<div class="pulltab second"><p class="tDesc">Settings</p></div>
 		<div class="sidebar settings">
 			<i class="fa fa-close"></i>
-			<p class="desc">Background Theme</p><p id="theme"></p>
+			<div><p class="desc">Background Theme</p><div class=option id="theme"></div></div>
+			<div><p class="desc">Table Theme</p><div class=option id="tbTheme"></div></div>
+			<div><p class="desc">Atom Theme</p><div class=option id="atomTheme"></div></div>
+			<div><p class="desc">Electron Configuration</p><div class=option id="elecConf"></div></div>
+			<div><p class="desc">Units</p><div class=option id="unit"></div></div>
 			<div class='about'>
 				<p>Developed by Kenneth Jao</p>
 				<a class="github" target="_blank" href="https://github.com/ksjdragon/atoms">Github</a>