|
|
@@ -0,0 +1,128 @@
|
|
|
+#menu {
|
|
|
+ background: #222222;
|
|
|
+ color: #fff;
|
|
|
+ height: 3.75em;
|
|
|
+ padding-left: 28px;
|
|
|
+ border-radius: 1.875em;
|
|
|
+}
|
|
|
+#menu ul,
|
|
|
+#menu li {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+#menu ul {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+#menu li {
|
|
|
+ float: left;
|
|
|
+ display: inline;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#menu a {
|
|
|
+ display: block;
|
|
|
+ line-height: 60px;
|
|
|
+ padding: 0 14px;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+#menu a.dropdown-arrow:after {
|
|
|
+ content: "\23F7";
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+#menu li a:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background: #0f4d8b;
|
|
|
+}
|
|
|
+#menu input {
|
|
|
+ display: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 60px;
|
|
|
+ width: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+#menu label {
|
|
|
+ display: none;
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 35px;
|
|
|
+}
|
|
|
+#menu label:before {
|
|
|
+ font-size: 1.6em;
|
|
|
+ content: "\2261";
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+#menu ul.sub-menus {
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 170px;
|
|
|
+ background: #444444;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+#menu ul.sub-menus li {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+#menu ul.sub-menus a {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+#menu li:hover ul.sub-menus {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+#menu ul.sub-menus a:hover {
|
|
|
+ background: #0f4d8b;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+@media screen and (max-width: 800px) {
|
|
|
+ #menu {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #menu ul {
|
|
|
+ background: #111;
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 3;
|
|
|
+ height: auto;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ #menu ul.sub-menus {
|
|
|
+ width: 100%;
|
|
|
+ position: static;
|
|
|
+ }
|
|
|
+ #menu ul.sub-menus a {
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
+ #menu li {
|
|
|
+ display: block;
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ #menu input,
|
|
|
+ #menu label {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ #menu input {
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+ #menu input:checked + label {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ #menu input:checked + label:before {
|
|
|
+ content: "\00d7";
|
|
|
+ }
|
|
|
+ #menu input:checked ~ ul {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
