css-ui
diff --git a/‎src/css/style.css‎
Lines changed: 0 additions & 17 deletions b/‎src/css/style.css‎
Lines changed: 0 additions & 17 deletions
diff --git a/‎src/css/style.dropdown.css‎
Lines changed: 3 additions & 2 deletions b/‎src/css/style.dropdown.css‎
Lines changed: 3 additions & 2 deletions
diff --git a/‎src/index.html‎
Lines changed: 27 additions & 3 deletions b/‎src/index.html‎
Lines changed: 27 additions & 3 deletions
diff --git a/‎src/js/jquery.dropdown.menu.js‎
Lines changed: 0 additions & 15 deletions b/‎src/js/jquery.dropdown.menu.js‎
Lines changed: 0 additions & 15 deletions
@@ -12,13 +12,14 @@
 .dropdown .employ-toggle { text-decoration: none; }
 .dropdown .employ-toggle.click {
     border-radius: 30px;
+       transition: all 0.1s ease-in-out;
         font-size: 14px;
           padding: 2px 12px;
-            color: #2d2d2d;
+            color: #acacac;
 }
 
 .dropdown .employ-toggle.click:hover {
-    background-color: #d9d9d9;
+    background-color: white;
 }
 
 .dropdown ul.expand-dropdown {
 
@@ -8,7 +8,17 @@
 	<title>CSS UI - Dropdown menu</title>
 
 	<!-- CSS styles -->
-	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=latin-ext">
+	<link rel="stylesheet" href="https://css-ui.github.io/css/cssui.min.css">
+	<link rel="stylesheet" href="css/style.dropdown.css">
+	<style>
+		body {
+			background-color: #f2f2f2;
+			     font-family: 'Open Sans', sans-serif;
+		}
+	</style>
 </head>
 <body>
 	<div class="wrapper" style="padding: 25px; width: 200px;">
@@ -33,7 +43,21 @@
 	</div>
 
 	<!-- javascript libraries and plugins  -->
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-	<script src="js/jquery.dropdown.menu.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+	<script>
+		$(function() {
+			$('.employ-toggle').on('click', function() {
+				var dropdown = '.expand-dropdown';
+				var employ   = '.employ-toggle';
+				$(dropdown).fadeToggle('fast');
+				$(dropdown).on('click', function(e) {
+					var target = e.target;
+					if (!$(target).is(employ) && !$(target).parents().is(employ)) {
+						$(dropdown).hide();
+					}
+				});
+			});
+		});
+	</script>
 </body>
 </html>