side menu

app/assets/styles/blocks/organization-list.scss

@@ -115,18 +115,21 @@
 
         &-item {
             border-bottom: 1px solid #ebebeb;
+            position: relative;
 
             &:after {
-                //content: url(../img/icon_leftbar_title_arrow1.png);
+                content: url(../img/icon_leftbar_title_arrow1.png);
+                transform: rotate(90deg);
+                position: absolute;
+                right: 5px;
+                top: 10px;
+                display: block;
+                height: 20px;
+                width: 15px;
             }
 
             &.active:after {
-                //transform: rotate(90deg);
-            }
-
-            & ul {
-                display: none;
-                background: #ebebeb;
+                transform: rotate(-90deg);
             }
 
             &.active ul {
@@ -137,10 +140,10 @@
         &-link {
             color: #004d7b;
             text-decoration: none;
-            font-size: 15px;
-            padding: 8px;
-            line-height: 19px;
+            font-size: 16px;
+            padding: 8px 25px 8px 8px;
             display: block;
+            line-height: 19px;
             font-family: $fontcuprum;
             font-weight: normal;
 
@@ -149,4 +152,41 @@
             }
         }
     }
+
+    &__side-submenu {
+        display: none;
+        background: #f7f7f7;
+
+        .organization-list__side-menu-item.active & {
+            display: block;
+        }
+
+        &-item {
+        }
+
+        &-link {
+            color: #9b9b9b;
+            text-decoration: none;
+            font-size: 15px;
+            padding: 8px 8px 8px 15px;
+            display: block;
+            line-height: 19px;
+            font-family: $fontcuprum;
+            font-weight: normal;
+            position: relative;
+
+            &:before {
+                position: absolute;
+                content: '>';
+                left: 5px;
+                top: 6px;
+                font-size: 17px;
+            }
+
+            &:hover {
+                background: #004d7b;
+                color: #fff;
+            }
+        }
+    }
 }

app/www/css/all.css

@@ -687,11 +687,22 @@ body {
 
 .organization-list__side-menu-item {
     border-bottom: 1px solid #ebebeb;
+    position: relative;
 }
 
-.organization-list__side-menu-item ul {
-    display: none;
-    background: #ebebeb;
+.organization-list__side-menu-item:after {
+    content: url(../img/icon_leftbar_title_arrow1.png);
+    transform: rotate(90deg);
+    position: absolute;
+    right: 5px;
+    top: 10px;
+    display: block;
+    height: 20px;
+    width: 15px;
+}
+
+.organization-list__side-menu-item.active:after {
+    transform: rotate(-90deg);
 }
 
 .organization-list__side-menu-item.active ul {
@@ -701,10 +712,10 @@ body {
 .organization-list__side-menu-link {
     color: #004d7b;
     text-decoration: none;
-    font-size: 15px;
-    padding: 8px;
-    line-height: 19px;
+    font-size: 16px;
+    padding: 8px 25px 8px 8px;
     display: block;
+    line-height: 19px;
     font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
     font-weight: normal;
 }
@@ -713,6 +724,40 @@ body {
     background: #d2dee9;
 }
 
+.organization-list__side-submenu {
+    display: none;
+    background: #f7f7f7;
+}
+
+.organization-list__side-menu-item.active .organization-list__side-submenu {
+    display: block;
+}
+
+.organization-list__side-submenu-link {
+    color: #9b9b9b;
+    text-decoration: none;
+    font-size: 15px;
+    padding: 8px 8px 8px 15px;
+    display: block;
+    line-height: 19px;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-weight: normal;
+    position: relative;
+}
+
+.organization-list__side-submenu-link:before {
+    position: absolute;
+    content: '>';
+    left: 5px;
+    top: 6px;
+    font-size: 17px;
+}
+
+.organization-list__side-submenu-link:hover {
+    background: #004d7b;
+    color: #fff;
+}
+
 .map__container {
     position: absolute;
     top: 0;