added filters by text type

assets/main.scss

@@ -69,14 +69,12 @@ header{
       ul{
         position: absolute;
         margin:0;
-        left:0; padding:0 1em 1em;
+        left:0; padding:0 1em 0;
         background-color: rgba(255,255,255, 1);
         // top:2em;
         white-space: nowrap;
-        height:1px; opacity:0;
-        overflow: hidden;
-        transition: opacity 0.3s ease-in-out;
         li{
+          position: relative;
           margin:0;
           padding:0;
           list-style: none;
@@ -84,9 +82,29 @@ header{
           font-weight:500;
           font-size: 1.2em;
           line-height: 1.2;
+          &:not(.active){
+            height:1px; opacity:0;
+            overflow: hidden;
+            transition: opacity 0.3s ease-in-out;
+          }
+          // &.active{
+          //   z-index: 99;
+          // }
           a{
             color: inherit;
             text-decoration: none;
+            display: inline-block;
+            width: 100%;
+            &:active,
+            &:focus{ outline:none; -moz-outline-style: none; }
+          }
+          &.active{
+            a:after{
+              content: " \1F7AC";
+              font-style: normal;
+              font-size: 0.7em;
+              font-weight: 300;
+            }
           }
         }
       }
@@ -106,10 +124,11 @@ header{
           color:#000;
         }
         ul{
-          height:auto; opacity: 1;
-          transition: height opacity 0.3s ease-in-out;
+          padding-bottom: 1em;
         }
         li{
+          height:auto; opacity: 1;
+          transition: height opacity 0.3s ease-in-out;
           color: rgb(100,100,100);
           &:hover{
             color: #000;