correct hover behavior

static/css/styles2.css

@@ -8,8 +8,9 @@
 
     
     .wrapper > * {
-    /*    border: 2px solid #f08c00; */
-        padding: 5px;
+        /*    border: 2px solid #f08c00; */
+        border 0;
+        padding: 5px; 
     }
 
     a {
@@ -20,8 +21,8 @@
     nav ul {
         list-style: none;
         margin: 0;
-      display: flex;
-      justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         padding: 0.2em 0.2em 0.2em 0.2em;
     }
 
@@ -32,31 +33,69 @@
     }
 
     aside ul {
+        margin-bottom: 0;
+        left: 15px;
+    }
+
+    aside ul label,
+    aside ul a {
+        padding-left: 15px;
+    }
+
+    aside ul ul label,
+    aside ul ul a {
+        padding-left: 30px;
+    }
+    
+    aside ul ul ul label,
+    aside ul ul ul a {
+        padding-left: 45px;
+    }
+
+    aside ul ul ul ul label,
+    aside ul ul ul ul a {
+        padding-left: 60px;
+    }
+    
+    aside li,
+    aside a,
+    aside ul label,
+    aside ul li,
+    aside ul a,
+    aside ul ul label,
+    aside ul ul li,
+    aside ul ul a,
+    aside ul ul ul label,
+    aside ul ul ul li,
+    aside ul ul ul a {
         list-style: none;
-        margin: 5px;
-        padding: 0;
-
-
+        margin: 0;
+        background: #35383d;   
     }
 
-    aside li {
-        margin-left: 0;
+
+    aside ul label:hover,
+    aside ul a:hover,
+    aside ul ul label:hover,
+    aside ul ul a:hover,
+    aside ul ul ul label:hover,
+    aside ul ul ul a:hover {
+        background: #4d5158; 
     }
 
-    aside li li {
-        margin-left: 30px;
-    }
 
     aside a {
         color: #a0f6aa;
         text-decoration: none;
     }
+
+
+
+        
     aside .cd-accordion-menu {
         width: 100%;
-        max-width: 600px; 
-        background: #4d5158;
-/*        margin: 4em auto;  */
-/*        box-shadow: 0 4px 40px #70ac76; */
+        max-width: 600px;        
+        background: #35383d;   
     }
     
     aside .cd-accordion-menu ul {
@@ -81,38 +120,42 @@
     aside .cd-accordion-menu a {
         position: relative;
         display: block;
-        background: #4d5158;
         color: #ffffff;
-/*        font-size: 1.6rem; */
+        font-size: 1.2em; 
     }
 
     aside .cd-accordion-menu label::before
     {
         /* icons */
-        content: 'V';
+        font:  normal normal normal 1.2em/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        content: '\f0da';
         display: inline-block;
         width: 16px;
         height: 16px;
-        -webkit-transform: translateY(-50%)  rotate(-90deg);
-        -moz-transform: translateY(-50%) rotate(-90deg);
-        -ms-transform: translateY(-50%) rotate(-90deg);
-        -o-transform: translateY(-50%) rotate(-90deg);
-        transform: translateY(-50%) rotate(-90deg); 
         
+        -webkit-transform: translateY(0%);
+        -moz-transform: translateY(0%);
+        -ms-transform:  translateY(0%);
+        -o-transform: translateY(0%);
+        transform: translateY(0%); 
     }
 
     aside .cd-accordion-menu label {
         cursor: pointer;
+        background: #35383d;
     }
 
 
     aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
         /* rotate arrow */
-        -webkit-transform: translateY(0%) ;
-        -moz-transform: translateY(0%) ;
-        -ms-transform: translateY(0%) ;
-        -o-transform: translateY(0%) ;
-        transform: translateY(0%) ;
+        -webkit-transform: translateY(20%) rotate(90deg);
+        -moz-transform: translateY(20%) rotate(90deg);
+        -ms-transform:  translateY(20%) rotate(90deg);
+        -o-transform: translateY(20%) rotate(90deg);
+        transform: translateY(20%) rotate(90deg); 
+
     }
     
     
@@ -123,12 +166,8 @@
         display: block;
     }
     
-    aside .cd-accordion-menu ul label,
-    aside .cd-accordion-menu ul a {
-        background: #35383d; 
-        padding-left: 30px;
-    }
-        
+
+    
     user ul {
         list-style: none;
         margin: 0;
@@ -170,10 +209,8 @@
 }
 .side {
   grid-area: sidebar;
-  background: #4d5158;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
+  background: #35383d;
+  padding: 0;
 }
 
 .ad {