-
Notifications
You must be signed in to change notification settings - Fork 0
/
menu.css
46 lines (45 loc) · 2.43 KB
/
menu.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#mobMenu .toggle, [id^=drop] {display: none; cursor: pointer;}
#mobMenu #toggleFirst {
margin-left: 10px;
padding: 10px 0 10px 35px;
background: url(../images/icon_menu.svg) no-repeat left center;
background-size: 25px auto;
font: 600 23px "Open Sans", sans-serif;
text-transform: uppercase;
color: #0c225d;
}
nav#mobMenu {margin: 0; padding: 0;}
nav#mobMenu:after {content: ""; display: table; clear: both;}
nav#mobMenu ul {float: none; padding: 0; margin: 0; list-style: none; position: relative;}
nav#mobMenu ul li {margin: 0px; display: block; float: left; background: #f7e8cc; border-bottom: 1px solid #faf3e5;}
nav#mobMenu ul ul ul li {border-bottom: none;}
nav#mobMenu a {display: block; padding: 10px 20px; color: #0c225d; text-decoration: none;}
nav#mobMenu a:hover {background: #ddd; color: #0c225d;}
nav#mobMenu ul ul {display: none; position: absolute; top: 60px;}
nav#mobMenu ul li:hover > ul {display: inherit;}
nav#mobMenu ul ul li {width: 100%; float: none; display: list-item; position: relative;}
nav#mobMenu ul ul ul li {position: relative; top: -60px; left: 170px;}
nav#mobMenu li > a:after {content: ' +';}
nav#mobMenu li > a:only-child:after {content: '';}
@media all and (max-width : 768px) {
nav#mobMenu .toggle + a, nav#mobMenu .menu {display: none;}
nav#mobMenu .toggle {display: block; padding: 10px 20px; color: #0c225d; text-decoration: none; border: none;}
nav#mobMenu .toggle:hover {background-color: #0c225d; color:#f7e8cc;}
nav#mobMenu [id^=drop]:checked + ul {display: block;}
nav#mobMenu ul li {display: block; width: 100%;}
nav#mobMenu ul > li {font-size: 17px; font-family: "Open Sans", sans-serif;}
nav#mobMenu ul > li > ul > li {font-size: 15px; background:#fff; border-bottom:1px solid #eee;}
nav#mobMenu ul ul .toggle, nav#mobMenu ul ul a {padding: 13px 20px;}
nav#mobMenu ul ul ul a {padding: 0 20px;}
nav#mobMenu a:hover, nav#mobMenu ul ul ul a {background-color: #0c225d; color:#f7e8cc;}
nav#mobMenu ul ul ul a {color: #f7e8cc; border-bottom: none;}
nav#mobMenu ul ul ul a:hover {background-color: #0c225d; color: #f7e8cc;}
nav#mobMenu ul ul {float: none; position: static; color: #f7e8cc;}
nav#mobMenu ul ul li:hover > ul, nav#mobMenu ul li:hover > ul {display: none;}
nav#mobMenu ul ul li {display: block; width: 100%;}
nav#mobMenu ul ul ul li {position: static;}
}
@media all and (max-width : 400px) {
nav#mobMenu .toggle, nav#mobMenu ul > li {font-size: 100%;}
nav#mobMenu ul ul ul li {font-size: 100%;}
}