drpDown menu 2.0

index.html

@@ -28,7 +28,8 @@
       <span class="nav-right">
         <div class="dropdown-menu">
 
-          <span><b>+</b></span>
+          <label for="dd-menu"><span><b>=</b></span></label>
+          <input type="checkbox" id="dd-menu" />
           <div class="dropdown-menu-content">
             <a href="pages/contact.php">Contact</a>
             <a href="pages/apropos.html">A propos</a>

styles/main.css

@@ -8,6 +8,9 @@ body {
     margin: 0;
 }
 
+a:link { color: black; }
+a:visited { color: black; }
+
 /* HEADER --------------------------------------------*/
 
 .header .title {
@@ -17,14 +20,14 @@ body {
     color: #ebebeb;
 }
 
-.nav-bar a:link { color: white; }
-.nav-bar a:visited { color: white; }
+.nav-left a:link { color: white; }
+.nav-left a:visited { color: white; }
 .nav-bar a:hover {
     color: #555;
     background-color: #ebebeb;
-    border: 10px solid #ebebeb;
+    /*border: 10px solid #ebebeb;
     border-radius: 25px;
-    font-size: 20px;
+    font-size: 20px;*/
 }
 
 
@@ -40,13 +43,13 @@ body {
 
 .nav-bar a {
     padding: 5px 20px;
-    margin: 0 10px 0 10px;
+    margin: 0 1px 0 1px;
     text-align: center;
     text-decoration: none;
-    border-radius: 25%;
+    border-radius: 10px;
     transition:
-        border 300ms,
-        font-size 300ms,
+        /*border 300ms,
+        font-size 300ms,*/
         background-color 300ms,
         color 300ms;
 }
@@ -64,21 +67,33 @@ body {
 }
 
 .dropdown-menu {
-    display: inline-block;
+    color: white;
+    text-align: center;
+    width: 40px;
+    cursor: pointer;
+}
+
+
+#dd-menu {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    cursor: pointer;
 }
 
 .dropdown-menu-content {
     display: none;
     position: absolute;
     right: 0;
+    height: 0;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
+    transition: height 300ms;
 }
 
 .dropdown-menu-content a {
-    color: black;
     padding: 12px 16;
     text-decoration: none;
     display: block;
@@ -89,8 +104,9 @@ body {
     background-color: #f1f1f1;
 }
 
-.dropdown-menu:hover .dropdown-menu-content {
+#dd-menu:checked + .dropdown-menu-content {
     display: block;
+    height: 60px;
 }
 
 /* MAIN CONTENT --------------------------------------------*/