Added menu example, missing files and sample generated css (which nonetheless has bugs...)

8 files changed, 558 insertions, 17 deletions

diff --git a/scss/tests/files/kronuz/include/_menu.scss b/scss/tests/files/kronuz/include/_menu.scss
index eb67ca2..45fffe1 100644
--- a/scss/tests/files/kronuz/include/_menu.scss
+++ b/scss/tests/files/kronuz/include/_menu.scss
@@ -192,13 +192,13 @@ $default-menu-levels: 3 !default;
 					padding-right: 12px;
 					@if $i#{$l}-arrow-color-current != undefined {
 						@if $u#{$l + 1}-type == dropup {
-							background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center;
+							background: image-url('menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-current, $cache-buster: false) no-repeat right center;
 						} @else if $u#{$l + 1}-type == dropright {
-							background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center;
+							background: image-url('menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-current, $cache-buster: false) no-repeat right center;
 						} @else if $u#{$l + 1}-type == dropleft {
-							background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center;
+							background: image-url('menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-current, $cache-buster: false) no-repeat right center;
 						} @else {
-							background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center;
+							background: image-url('menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-current, $cache-buster: false) no-repeat right center;
 						}
 					}
 				}
@@ -303,13 +303,13 @@ $default-menu-levels: 3 !default;
 						padding-right: 12px;
 						@if $i#{$l}-arrow-color-hover != undefined {
 							@if $u#{$l + 1}-type == dropup {
-								background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center;
+								background: image-url('menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-hover, $cache-buster: false) no-repeat right center;
 							} @else if $u#{$l + 1}-type == dropright {
-								background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center;
+								background: image-url('menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-hover, $cache-buster: false) no-repeat right center;
 							} @else if $u#{$l + 1}-type == dropleft {
-								background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center;
+								background: image-url('menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-hover, $cache-buster: false) no-repeat right center;
 							} @else {
-								background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center;
+								background: image-url('menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-hover, $cache-buster: false) no-repeat right center;
 							}
 						}
 					}
@@ -505,13 +505,13 @@ $default-menu-levels: 3 !default;
 							padding-right: 12px;
 							@if $i#{$l}-arrow-color-natural != undefined {
 								@if $u#{$l + 1}-type == dropup {
-									background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center;
+									background: image-url('menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-natural, $cache-buster: false) no-repeat right center;
 								} @else if $u#{$l + 1}-type == dropright {
-									background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center;
+									background: image-url('menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-natural, $cache-buster: false) no-repeat right center;
 								} @else if $u#{$l + 1}-type == dropleft {
-									background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center;
+									background: image-url('menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-natural, $cache-buster: false) no-repeat right center;
 								} @else {
-									background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center;
+									background: image-url('menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-natural, $cache-buster: false) no-repeat right center;
 								}
 							}
 						}
diff --git a/scss/tests/files/kronuz/menu.css b/scss/tests/files/kronuz/menu.css
index 6b1aef3..fc6d7c6 100644
--- a/scss/tests/files/kronuz/menu.css
+++ b/scss/tests/files/kronuz/menu.css
@@ -1,3 +1,422 @@
-.bottommenu {
-	...
+.bottommenu .built-menu .built-menu {
+  display: none;
+}
+.bottommenu li.l1.hover .built-menu.l2, .bottommenu li.l1:hover
+.built-menu.l2 {
+  display: block;
+}
+.bottommenu li.l2.hover .built-menu.l3, .bottommenu li.l2:hover
+.built-menu.l3 {
+  display: block;
+}
+.bottommenu li.l3.hover .built-menu.l4, .bottommenu li.l3:hover
+.built-menu.l4 {
+  display: block;
+}
+.bottommenu li.post_items, .bottommenu li.pre_items {
+  display: none !important;
+}
+.bottommenu ul.l1 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-clip: padding-box;
+}
+.bottommenu ul.l1 li.l1.current::after, .bottommenu ul.l1
+li.l1.current::before {
+  background-clip: padding-box;
+  background: none;
+}
+.bottommenu ul.l1 li.l1.current .a.l1, .bottommenu ul.l1 li.l1.current
+a.l1 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l1 li.l1.current .a.l1 .label, .bottommenu ul.l1
+li.l1.current a.l1 .label {
+  color: #444444;
+}
+.bottommenu ul.l1 li.l1.current .a.l1.folder .tag, .bottommenu ul.l1
+li.l1.current a.l1.folder .tag {
+  padding-right: 12px;
+  background: url("static/assets/menus_arrow_up-wnLGaSK_Ainl9LupmmwNyA.png")
+    no-repeat right center;
+}
+.bottommenu ul.l1 li.l1.hover::after, .bottommenu ul.l1
+li.l1.hover::before, .bottommenu ul.l1 li.l1:hover::after, .bottommenu
+ul.l1 li.l1:hover::before, .bottommenu ul.l1.hover li.l1.hover::after,
+.bottommenu ul.l1.hover li.l1.hover::before, .bottommenu ul.l1.hover
+li.l1:hover::after, .bottommenu ul.l1.hover li.l1:hover::before,
+.bottommenu ul.l1:hover li.l1.hover::after, .bottommenu ul.l1:hover
+li.l1.hover::before, .bottommenu ul.l1:hover li.l1:hover::after,
+.bottommenu ul.l1:hover li.l1:hover::before {
+  background: none;
+}
+.bottommenu ul.l1 li.l1.hover .a.l1, .bottommenu ul.l1 li.l1.hover
+a.l1, .bottommenu ul.l1 li.l1:hover .a.l1, .bottommenu ul.l1
+li.l1:hover a.l1, .bottommenu ul.l1.hover li.l1.hover .a.l1,
+.bottommenu ul.l1.hover li.l1.hover a.l1, .bottommenu ul.l1.hover
+li.l1:hover .a.l1, .bottommenu ul.l1.hover li.l1:hover a.l1,
+.bottommenu ul.l1:hover li.l1.hover .a.l1, .bottommenu ul.l1:hover
+li.l1.hover a.l1, .bottommenu ul.l1:hover li.l1:hover .a.l1,
+.bottommenu ul.l1:hover li.l1:hover a.l1 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l1 li.l1.hover .a.l1 .label, .bottommenu ul.l1
+li.l1.hover a.l1 .label, .bottommenu ul.l1 li.l1:hover .a.l1 .label,
+.bottommenu ul.l1 li.l1:hover a.l1 .label, .bottommenu ul.l1.hover
+li.l1.hover .a.l1 .label, .bottommenu ul.l1.hover li.l1.hover a.l1
+.label, .bottommenu ul.l1.hover li.l1:hover .a.l1 .label, .bottommenu
+ul.l1.hover li.l1:hover a.l1 .label, .bottommenu ul.l1:hover
+li.l1.hover .a.l1 .label, .bottommenu ul.l1:hover li.l1.hover a.l1
+.label, .bottommenu ul.l1:hover li.l1:hover .a.l1 .label, .bottommenu
+ul.l1:hover li.l1:hover a.l1 .label {
+  color: #444444;
+}
+.bottommenu ul.l1 li.l1.hover .a.l1.folder .tag, .bottommenu ul.l1
+li.l1.hover a.l1.folder .tag, .bottommenu ul.l1 li.l1:hover
+.a.l1.folder .tag, .bottommenu ul.l1 li.l1:hover a.l1.folder .tag,
+.bottommenu ul.l1.hover li.l1.hover .a.l1.folder .tag, .bottommenu
+ul.l1.hover li.l1.hover a.l1.folder .tag, .bottommenu ul.l1.hover
+li.l1:hover .a.l1.folder .tag, .bottommenu ul.l1.hover li.l1:hover
+a.l1.folder .tag, .bottommenu ul.l1:hover li.l1.hover .a.l1.folder
+.tag, .bottommenu ul.l1:hover li.l1.hover a.l1.folder .tag,
+.bottommenu ul.l1:hover li.l1:hover .a.l1.folder .tag, .bottommenu
+ul.l1:hover li.l1:hover a.l1.folder .tag {
+  padding-right: 12px;
+  background: url("static/assets/menus_arrow_up-wnLGaSK_Ainl9LupmmwNyA.png")
+    no-repeat right center;
+}
+.bottommenu ul.l1 li.l1, .bottommenu ul.l1.hover li.l1, .bottommenu
+ul.l1:hover li.l1 {
+  position: relative;
+  display: inline-block;
+  *vertical-align: middle;
+  z-index: 50;
+}
+.bottommenu ul.l1 li.l1:hover, .bottommenu ul.l1.hover li.l1:hover,
+.bottommenu ul.l1:hover li.l1:hover {
+  z-index: 100;
+}
+.bottommenu ul.l1 li.l1 .a.l1::after, .bottommenu ul.l1 li.l1
+.a.l1::before, .bottommenu ul.l1 li.l1 a.l1::after, .bottommenu ul.l1
+li.l1 a.l1::before, .bottommenu ul.l1 li.l1::after, .bottommenu ul.l1
+li.l1::before, .bottommenu ul.l1.hover li.l1 .a.l1::after, .bottommenu
+ul.l1.hover li.l1 .a.l1::before, .bottommenu ul.l1.hover li.l1
+a.l1::after, .bottommenu ul.l1.hover li.l1 a.l1::before, .bottommenu
+ul.l1.hover li.l1::after, .bottommenu ul.l1.hover li.l1::before,
+.bottommenu ul.l1:hover li.l1 .a.l1::after, .bottommenu ul.l1:hover
+li.l1 .a.l1::before, .bottommenu ul.l1:hover li.l1 a.l1::after,
+.bottommenu ul.l1:hover li.l1 a.l1::before, .bottommenu ul.l1:hover
+li.l1::after, .bottommenu ul.l1:hover li.l1::before {
+  display: none;
+}
+.bottommenu ul.l1 li.l1 .a.l1, .bottommenu ul.l1 li.l1 a.l1,
+.bottommenu ul.l1.hover li.l1 .a.l1, .bottommenu ul.l1.hover li.l1
+a.l1, .bottommenu ul.l1:hover li.l1 .a.l1, .bottommenu ul.l1:hover
+li.l1 a.l1 {
+  display: inline-block;
+  background-clip: padding-box;
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l1 li.l1 .a.l1 img.icon, .bottommenu ul.l1 li.l1 a.l1
+img.icon, .bottommenu ul.l1.hover li.l1 .a.l1 img.icon, .bottommenu
+ul.l1.hover li.l1 a.l1 img.icon, .bottommenu ul.l1:hover li.l1 .a.l1
+img.icon, .bottommenu ul.l1:hover li.l1 a.l1 img.icon {
+  vertical-align: middle;
+}
+.bottommenu ul.l1 li.l1 .a.l1 .tag, .bottommenu ul.l1 li.l1 a.l1 .tag,
+.bottommenu ul.l1.hover li.l1 .a.l1 .tag, .bottommenu ul.l1.hover
+li.l1 a.l1 .tag, .bottommenu ul.l1:hover li.l1 .a.l1 .tag, .bottommenu
+ul.l1:hover li.l1 a.l1 .tag {
+  vertical-align: middle;
+}
+.bottommenu ul.l1 li.l1 .a.l1 .label, .bottommenu ul.l1 li.l1 a.l1
+.label, .bottommenu ul.l1.hover li.l1 .a.l1 .label, .bottommenu
+ul.l1.hover li.l1 a.l1 .label, .bottommenu ul.l1:hover li.l1 .a.l1
+.label, .bottommenu ul.l1:hover li.l1 a.l1 .label {
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  color: #444444;
+  padding: 0 12px;
+  height: 20px;
+  line-height: 20px;
+}
+.bottommenu ul.l1 li.l1 .a.l1.center .label, .bottommenu ul.l1 li.l1
+a.l1.center .label, .bottommenu ul.l1.hover li.l1 .a.l1.center .label,
+.bottommenu ul.l1.hover li.l1 a.l1.center .label, .bottommenu
+ul.l1:hover li.l1 .a.l1.center .label, .bottommenu ul.l1:hover li.l1
+a.l1.center .label {
+  text-align: center;
+}
+.bottommenu ul.l1 li.l1 .a.l1.folder .tag, .bottommenu ul.l1 li.l1
+a.l1.folder .tag, .bottommenu ul.l1.hover li.l1 .a.l1.folder .tag,
+.bottommenu ul.l1.hover li.l1 a.l1.folder .tag, .bottommenu
+ul.l1:hover li.l1 .a.l1.folder .tag, .bottommenu ul.l1:hover li.l1
+a.l1.folder .tag {
+  padding-right: 12px;
+  background: url("static/assets/menus_arrow_up-wnLGaSK_Ainl9LupmmwNyA.png")
+    no-repeat right center;
+}
+.bottommenu ul.l1 li.l1.folder.hover .a.l1, .bottommenu ul.l1
+li.l1.folder.hover a.l1, .bottommenu ul.l1 li.l1.folder:hover .a.l1,
+.bottommenu ul.l1 li.l1.folder:hover a.l1, .bottommenu ul.l1.hover
+li.l1.folder.hover .a.l1, .bottommenu ul.l1.hover li.l1.folder.hover
+a.l1, .bottommenu ul.l1.hover li.l1.folder:hover .a.l1, .bottommenu
+ul.l1.hover li.l1.folder:hover a.l1, .bottommenu ul.l1:hover
+li.l1.folder.hover .a.l1, .bottommenu ul.l1:hover li.l1.folder.hover
+a.l1, .bottommenu ul.l1:hover li.l1.folder:hover .a.l1, .bottommenu
+ul.l1:hover li.l1.folder:hover a.l1 {
+  border-radius: 2px;
+}
+.bottommenu ul.l2 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-clip: padding-box;
+  background: #ffffff;
+  background: rgba(255, 255, 255, 0.3);
+  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 4px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #006400;
+  border-radius: 4px;
+  transition: background 1s;
+}
+.bottommenu ul.l2.hover, .bottommenu ul.l2:hover {
+  background: #ffffff;
+}
+.bottommenu ul.l2 li.l2.hover .a.l2, .bottommenu ul.l2 li.l2.hover
+a.l2, .bottommenu ul.l2 li.l2:hover .a.l2, .bottommenu ul.l2
+li.l2:hover a.l2, .bottommenu ul.l2.hover li.l2.hover .a.l2,
+.bottommenu ul.l2.hover li.l2.hover a.l2, .bottommenu ul.l2.hover
+li.l2:hover .a.l2, .bottommenu ul.l2.hover li.l2:hover a.l2,
+.bottommenu ul.l2:hover li.l2.hover .a.l2, .bottommenu ul.l2:hover
+li.l2.hover a.l2, .bottommenu ul.l2:hover li.l2:hover .a.l2,
+.bottommenu ul.l2:hover li.l2:hover a.l2 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l2 li.l2.hover .a.l2 .label, .bottommenu ul.l2
+li.l2.hover a.l2 .label, .bottommenu ul.l2 li.l2:hover .a.l2 .label,
+.bottommenu ul.l2 li.l2:hover a.l2 .label, .bottommenu ul.l2.hover
+li.l2.hover .a.l2 .label, .bottommenu ul.l2.hover li.l2.hover a.l2
+.label, .bottommenu ul.l2.hover li.l2:hover .a.l2 .label, .bottommenu
+ul.l2.hover li.l2:hover a.l2 .label, .bottommenu ul.l2:hover
+li.l2.hover .a.l2 .label, .bottommenu ul.l2:hover li.l2.hover a.l2
+.label, .bottommenu ul.l2:hover li.l2:hover .a.l2 .label, .bottommenu
+ul.l2:hover li.l2:hover a.l2 .label {
+  color: #444444;
+}
+.bottommenu ul.l2 li.l2.current .a.l2, .bottommenu ul.l2 li.l2.current
+a.l2, .bottommenu ul.l2.hover li.l2.current .a.l2, .bottommenu
+ul.l2.hover li.l2.current a.l2, .bottommenu ul.l2:hover li.l2.current
+.a.l2, .bottommenu ul.l2:hover li.l2.current a.l2 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l2 li.l2.current .a.l2 .label, .bottommenu ul.l2
+li.l2.current a.l2 .label, .bottommenu ul.l2.hover li.l2.current .a.l2
+.label, .bottommenu ul.l2.hover li.l2.current a.l2 .label, .bottommenu
+ul.l2:hover li.l2.current .a.l2 .label, .bottommenu ul.l2:hover
+li.l2.current a.l2 .label {
+  color: #444444;
+}
+.bottommenu ul.l2 li.l2, .bottommenu ul.l2.hover li.l2, .bottommenu
+ul.l2:hover li.l2 {
+  position: relative;
+  z-index: 50;
+  padding: 0 6px;
+  margin: 2px 0;
+}
+.bottommenu ul.l2 li.l2:hover, .bottommenu ul.l2.hover li.l2:hover,
+.bottommenu ul.l2:hover li.l2:hover {
+  z-index: 100;
+}
+.bottommenu ul.l2 li.l2.first, .bottommenu ul.l2.hover li.l2.first,
+.bottommenu ul.l2:hover li.l2.first {
+  margin-top: 6px;
+}
+.bottommenu ul.l2 li.l2.last, .bottommenu ul.l2.hover li.l2.last,
+.bottommenu ul.l2:hover li.l2.last {
+  margin-bottom: 6px;
+}
+.bottommenu ul.l2 li.l2.separator, .bottommenu ul.l2.hover
+li.l2.separator, .bottommenu ul.l2:hover li.l2.separator {
+  padding: 0;
+  font-size: 1px;
+  border-top: 1px solid #008000;
+}
+.bottommenu ul.l2 li.l2 .a.l2, .bottommenu ul.l2 li.l2 a.l2,
+.bottommenu ul.l2.hover li.l2 .a.l2, .bottommenu ul.l2.hover li.l2
+a.l2, .bottommenu ul.l2:hover li.l2 .a.l2, .bottommenu ul.l2:hover
+li.l2 a.l2 {
+  display: inline-block;
+  background-clip: padding-box;
+  background: none;
+  border-radius: 2px;
+  width: 100%;
+}
+.bottommenu ul.l2 li.l2 .a.l2 img.icon, .bottommenu ul.l2 li.l2 a.l2
+img.icon, .bottommenu ul.l2.hover li.l2 .a.l2 img.icon, .bottommenu
+ul.l2.hover li.l2 a.l2 img.icon, .bottommenu ul.l2:hover li.l2 .a.l2
+img.icon, .bottommenu ul.l2:hover li.l2 a.l2 img.icon {
+  vertical-align: middle;
+}
+.bottommenu ul.l2 li.l2 .a.l2 .tag, .bottommenu ul.l2 li.l2 a.l2 .tag,
+.bottommenu ul.l2.hover li.l2 .a.l2 .tag, .bottommenu ul.l2.hover
+li.l2 a.l2 .tag, .bottommenu ul.l2:hover li.l2 .a.l2 .tag, .bottommenu
+ul.l2:hover li.l2 a.l2 .tag {
+  vertical-align: middle;
+}
+.bottommenu ul.l2 li.l2 .a.l2 .label, .bottommenu ul.l2 li.l2 a.l2
+.label, .bottommenu ul.l2.hover li.l2 .a.l2 .label, .bottommenu
+ul.l2.hover li.l2 a.l2 .label, .bottommenu ul.l2:hover li.l2 .a.l2
+.label, .bottommenu ul.l2:hover li.l2 a.l2 .label {
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  color: #444444;
+  padding: 2px 6px;
+  height: 20px;
+  line-height: 20px;
+}
+.bottommenu ul.l2 li.l2 .a.l2.center .label, .bottommenu ul.l2 li.l2
+a.l2.center .label, .bottommenu ul.l2.hover li.l2 .a.l2.center .label,
+.bottommenu ul.l2.hover li.l2 a.l2.center .label, .bottommenu
+ul.l2:hover li.l2 .a.l2.center .label, .bottommenu ul.l2:hover li.l2
+a.l2.center .label {
+  text-align: center;
+}
+.bottommenu .built-menu.l2 {
+  position: absolute;
+  padding: 30px 30px 5px;
+  margin: -30px -30px -5px;
+  bottom: 20px;
+}
+.bottommenu .built-menu.l2 ul.l2 li.l2.first {
+  margin-top: 4px !important;
+}
+.bottommenu .built-menu.l2 ul.l2 li.l2.last {
+  margin-bottom: 4px !important;
+}
+.bottommenu ul.l3 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding: 2px 10px;
+  margin: 2px 0 0 0;
+  background-clip: padding-box;
+  transition: background 1s;
+}
+.bottommenu ul.l3 li.l3.hover .a.l3, .bottommenu ul.l3 li.l3.hover
+a.l3, .bottommenu ul.l3 li.l3:hover .a.l3, .bottommenu ul.l3
+li.l3:hover a.l3, .bottommenu ul.l3.hover li.l3.hover .a.l3,
+.bottommenu ul.l3.hover li.l3.hover a.l3, .bottommenu ul.l3.hover
+li.l3:hover .a.l3, .bottommenu ul.l3.hover li.l3:hover a.l3,
+.bottommenu ul.l3:hover li.l3.hover .a.l3, .bottommenu ul.l3:hover
+li.l3.hover a.l3, .bottommenu ul.l3:hover li.l3:hover .a.l3,
+.bottommenu ul.l3:hover li.l3:hover a.l3 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l3 li.l3.hover .a.l3 .label, .bottommenu ul.l3
+li.l3.hover a.l3 .label, .bottommenu ul.l3 li.l3:hover .a.l3 .label,
+.bottommenu ul.l3 li.l3:hover a.l3 .label, .bottommenu ul.l3.hover
+li.l3.hover .a.l3 .label, .bottommenu ul.l3.hover li.l3.hover a.l3
+.label, .bottommenu ul.l3.hover li.l3:hover .a.l3 .label, .bottommenu
+ul.l3.hover li.l3:hover a.l3 .label, .bottommenu ul.l3:hover
+li.l3.hover .a.l3 .label, .bottommenu ul.l3:hover li.l3.hover a.l3
+.label, .bottommenu ul.l3:hover li.l3:hover .a.l3 .label, .bottommenu
+ul.l3:hover li.l3:hover a.l3 .label {
+  color: #444444;
+}
+.bottommenu ul.l3 li.l3.current .a.l3, .bottommenu ul.l3 li.l3.current
+a.l3, .bottommenu ul.l3.hover li.l3.current .a.l3, .bottommenu
+ul.l3.hover li.l3.current a.l3, .bottommenu ul.l3:hover li.l3.current
+.a.l3, .bottommenu ul.l3:hover li.l3.current a.l3 {
+  background: none;
+  border-radius: 2px;
+}
+.bottommenu ul.l3 li.l3.current .a.l3 .label, .bottommenu ul.l3
+li.l3.current a.l3 .label, .bottommenu ul.l3.hover li.l3.current .a.l3
+.label, .bottommenu ul.l3.hover li.l3.current a.l3 .label, .bottommenu
+ul.l3:hover li.l3.current .a.l3 .label, .bottommenu ul.l3:hover
+li.l3.current a.l3 .label {
+  color: #444444;
+}
+.bottommenu ul.l3 li.l3, .bottommenu ul.l3.hover li.l3, .bottommenu
+ul.l3:hover li.l3 {
+  position: relative;
+  z-index: 50;
+  padding: 0 6px;
+  margin: 2px 0;
+}
+.bottommenu ul.l3 li.l3:hover, .bottommenu ul.l3.hover li.l3:hover,
+.bottommenu ul.l3:hover li.l3:hover {
+  z-index: 100;
+}
+.bottommenu ul.l3 li.l3.first, .bottommenu ul.l3.hover li.l3.first,
+.bottommenu ul.l3:hover li.l3.first {
+  margin-top: 6px;
+}
+.bottommenu ul.l3 li.l3.last, .bottommenu ul.l3.hover li.l3.last,
+.bottommenu ul.l3:hover li.l3.last {
+  margin-bottom: 6px;
+}
+.bottommenu ul.l3 li.l3.separator, .bottommenu ul.l3.hover
+li.l3.separator, .bottommenu ul.l3:hover li.l3.separator {
+  padding: 0;
+  font-size: 1px;
+  border-top: 1px solid #008000;
+}
+.bottommenu ul.l3 li.l3 .a.l3, .bottommenu ul.l3 li.l3 a.l3,
+.bottommenu ul.l3.hover li.l3 .a.l3, .bottommenu ul.l3.hover li.l3
+a.l3, .bottommenu ul.l3:hover li.l3 .a.l3, .bottommenu ul.l3:hover
+li.l3 a.l3 {
+  display: inline-block;
+  background-clip: padding-box;
+  background: none;
+  border-radius: 2px;
+  width: 100%;
+}
+.bottommenu ul.l3 li.l3 .a.l3 img.icon, .bottommenu ul.l3 li.l3 a.l3
+img.icon, .bottommenu ul.l3.hover li.l3 .a.l3 img.icon, .bottommenu
+ul.l3.hover li.l3 a.l3 img.icon, .bottommenu ul.l3:hover li.l3 .a.l3
+img.icon, .bottommenu ul.l3:hover li.l3 a.l3 img.icon {
+  vertical-align: middle;
+}
+.bottommenu ul.l3 li.l3 .a.l3 .tag, .bottommenu ul.l3 li.l3 a.l3 .tag,
+.bottommenu ul.l3.hover li.l3 .a.l3 .tag, .bottommenu ul.l3.hover
+li.l3 a.l3 .tag, .bottommenu ul.l3:hover li.l3 .a.l3 .tag, .bottommenu
+ul.l3:hover li.l3 a.l3 .tag {
+  vertical-align: middle;
+}
+.bottommenu ul.l3 li.l3 .a.l3 .label, .bottommenu ul.l3 li.l3 a.l3
+.label, .bottommenu ul.l3.hover li.l3 .a.l3 .label, .bottommenu
+ul.l3.hover li.l3 a.l3 .label, .bottommenu ul.l3:hover li.l3 .a.l3
+.label, .bottommenu ul.l3:hover li.l3 a.l3 .label {
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  color: #444444;
+  padding: 2px 6px;
+  height: 20px;
+  line-height: 20px;
+}
+.bottommenu ul.l3 li.l3 .a.l3.center .label, .bottommenu ul.l3 li.l3
+a.l3.center .label, .bottommenu ul.l3.hover li.l3 .a.l3.center .label,
+.bottommenu ul.l3.hover li.l3 a.l3.center .label, .bottommenu
+ul.l3:hover li.l3 .a.l3.center .label, .bottommenu ul.l3:hover li.l3
+a.l3.center .label {
+  text-align: center;
+}
+.bottommenu .built-menu.l3 {
+  display: block;
+}
+.bottommenu .built-menu.l3 ul.l3 {
+  border-top: 1px solid #008000;
 }
diff --git a/scss/tests/files/kronuz/menu.html b/scss/tests/files/kronuz/menu.html
new file mode 100644
index 0000000..15c115e
--- /dev/null
+++ b/scss/tests/files/kronuz/menu.html
@@ -0,0 +1,120 @@
+<html>
+	<head>
+		<title>Menu Test</title>
+		<link type="text/css" href="menu.css" rel="stylesheet" />
+		<style>
+			body {
+				background: #ddd
+			}
+			.bottommenu {
+				margin-top: 300px;
+			}
+			.built-menu {
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<nav class="bottommenu">
+			<div class="built-menu menu-content l1 items_8">
+				<ul id="menu-bottommenu" class="l1 items_8">
+					<li id="bottommenu-1-1" class="first l1 i1 folder">
+						<a class="first l1 i1 folder" href="#"><span class="label"><span class="tag">About</span></span></a>
+						<div class="built-menu menu-content l2 items_7">
+							<ul id="menu-bottommenu2" class="l2 items_7">
+								<li id="bottommenu-2-1" class="first l2 i1">
+									<a class="first l2 i1" href="#"><span class="label"><span class="tag">Press</span></span></a>
+								</li>
+								<li id="bottommenu-2-2" class="l2 i2">
+									<a class="l2 i2" href="#"><span class="label"><span class="tag">Team</span></span></a>
+								</li>
+								<li id="bottommenu-2-3" class="l2 i3">
+									<a class="l2 i3" href="#"><span class="label"><span class="tag">Business</span></span></a>
+								</li>
+								<li id="bottommenu-2-4" class="l2 i4">
+									<a class="l2 i4" href="#"><span class="label"><span class="tag">Marketing</span></span></a>
+								</li>
+								<li id="bottommenu-2-5" class="l2 i5">
+									<a class="l2 i5" href="#"><span class="label"><span class="tag">Commerce</span></span></a>
+								</li>
+								<li id="bottommenu-2-6" class="l2 i6">
+									<a class="l2 i6" href="#"><span class="label"><span class="tag">Terms of Use</span></span></a>
+								</li>
+								<li id="bottommenu-2-7" class="last l2 i7">
+									<a class="last l2 i7" href="#"><span class="label"><span class="tag">Privacy Policy</span></span></a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li id="bottommenu-1-2" class="l1 i2 folder">
+						<a class="l1 i2 folder" href="#"><span class="label"><span class="tag">Directory</span></span></a>
+						<div class="built-menu menu-content l2 items_2">
+							<ul id="menu-bottommenu3" class="l2 items_2">
+								<li id="bottommenu-2-12" class="first l2 i1">
+									<a class="first l2 i1" href="#"><span class="label"><span class="tag">Professional</span></span></a>
+								</li>
+								<li id="bottommenu-2-22" class="last l2 i2">
+									<a class="last l2 i2" href="#"><span class="label"><span class="tag">Business</span></span></a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li id="bottommenu-1-3" class="l1 i3 folder">
+						<a class="l1 i3 folder" href="#"><span class="label"><span class="tag">Marketplace</span></span></a>
+						<div class="built-menu menu-content l2 items_2">
+							<ul id="menu-bottommenu4" class="l2 items_2">
+								<li id="bottommenu-2-13" class="first l2 i1">
+									<a class="first l2 i1" href="#"><span class="label"><span class="tag">Offers</span></span></a>
+								</li>
+								<li id="bottommenu-2-23" class="last l2 i2">
+									<a class="last l2 i2" href="#"><span class="label"><span class="tag">Products</span></span></a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li id="bottommenu-1-4" class="l1 i4">
+						<a class="l1 i4" href="#"><span class="label"><span class="tag">Blog</span></span></a>
+					</li>
+					<li id="bottommenu-1-5" class="l1 i5 folder">
+						<a class="l1 i5 folder" href="#"><span class="label"><span class="tag">Multimedia</span></span></a>
+						<div class="built-menu menu-content l2 items_2">
+							<ul id="menu-bottommenu5" class="l2 items_2">
+								<li id="bottommenu-videos" class="first l2 i1">
+									<a class="first l2 i1" href="#"><span class="label"><span class="tag">Videos</span></span></a>
+								</li>
+								<li id="bottommenu-2-23" class="last l2 i2">
+									<a class="last l2 i2" href="#"><span class="label"><span class="tag">Gallery</span></span></a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li id="bottommenu-1-6" class="l1 i6 folder">
+						<a class="l1 i6 folder" href="#"><span class="label"><span class="tag">Learn More</span></span></a>
+						<div class="built-menu menu-content l2 items_5">
+							<ul id="menu-bottommenu6" class="l2 items_5">
+								<li id="bottommenu-2-14" class="first l2 i1">
+									<a class="first l2 i1" href="#"><span class="label"><span class="tag">Overview</span></span></a>
+								</li>
+								<li id="bottommenu-2-24" class="l2 i2">
+									<a class="l2 i2" href="#"><span class="label"><span class="tag">Networking</span></span></a>
+								</li>
+								<li id="bottommenu-2-32" class="l2 i3">
+									<a class="l2 i3" href="#"><span class="label"><span class="tag">Directory</span></span></a>
+								</li>
+								<li id="bottommenu-2-42" class="l2 i4">
+									<a class="l2 i4" href="#"><span class="label"><span class="tag">Pages</span></span></a>
+								</li>
+								<li id="bottommenu-2-52" class="last l2 i5">
+									<a class="last l2 i5" href="#"><span class="label"><span class="tag">Services</span></span></a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li id="bottommenu-1-7" class="l1 i7">
+						<a class="l1 i7" href="#"><span class="label"><span class="tag">Contact Us</span></span></a>
+					</li>
+				</ul>
+			</div>
+		</nav>
+	</body>
+</html>
\ No newline at end of file
diff --git a/scss/tests/files/kronuz/menu.scss b/scss/tests/files/kronuz/menu.scss
index 2c7c43d..9383a66 100644
--- a/scss/tests/files/kronuz/menu.scss
+++ b/scss/tests/files/kronuz/menu.scss
@@ -1,3 +1,5 @@
+@option compress:no;
+
 @import "menu";
 
 $MENUS-RADIUS: 2px;
@@ -5,7 +7,7 @@ $BASE-COLOR-HOVER: green;
 $BASE-COLOR-SHADE: darkgreen;
 $BOTTOMMENU-COLOR: #444;
 $BOTTOMMENU-COLOR-HOVER: #222;
-$BOTTOMMENU-COLOR-HOVER-CURRENT: #458;
+$BOTTOMMENU-COLOR-HOVER-CURRENT: #468;
 $BOTTOMMENU-SUBMENU-BORDER-WIDTH: 2px;
 $BOTTOMMENU-SUBMENU-BACKGROUND: white;
 
@@ -22,11 +24,11 @@ $BOTTOMMENU-SUBMENU-BACKGROUND: white;
 		$i0-background-hover: $BASE-COLOR-HOVER,
 		$i0-separator-color: $BASE-COLOR-HOVER,
 
-		$u2-type: dropup,
+		$u2-type: 'dropup',
 		$u2-border-width: $BOTTOMMENU-SUBMENU-BORDER-WIDTH,
 		$u2-border-color: $BASE-COLOR-SHADE,
 		$u2-border-radius: $MENUS-RADIUS * 2,
-		$u2-background: rgba($BOTTOMMENU-SUBMENU-BACKGROUND, 90%),
+		$u2-background: rgba($BOTTOMMENU-SUBMENU-BACKGROUND, 30%),
 		$u2-background-hover: $BOTTOMMENU-SUBMENU-BACKGROUND,
 	);
 }
diff --git a/scss/tests/files/kronuz/static/menus/arrow_down.png b/scss/tests/files/kronuz/static/menus/arrow_down.png
new file mode 100644
index 0000000..61d3b28
--- /dev/null
+++ b/scss/tests/files/kronuz/static/menus/arrow_down.png
diff --git a/scss/tests/files/kronuz/static/menus/arrow_left.png b/scss/tests/files/kronuz/static/menus/arrow_left.png
new file mode 100644
index 0000000..9b25d31
--- /dev/null
+++ b/scss/tests/files/kronuz/static/menus/arrow_left.png
diff --git a/scss/tests/files/kronuz/static/menus/arrow_right.png b/scss/tests/files/kronuz/static/menus/arrow_right.png
new file mode 100644
index 0000000..4006743
--- /dev/null
+++ b/scss/tests/files/kronuz/static/menus/arrow_right.png
diff --git a/scss/tests/files/kronuz/static/menus/arrow_up.png b/scss/tests/files/kronuz/static/menus/arrow_up.png
new file mode 100644
index 0000000..5bd04f7
--- /dev/null
+++ b/scss/tests/files/kronuz/static/menus/arrow_up.png