1/* =Menu 2----------------------------------------------- */ 3 4.main-navigation { 5 display: block; 6 position: relative; 7 float: left; 8 width: 300px; 9 padding: 0 0 35px; 10 margin: 0 -40px 20px; 11 font-weight: bold; 12 text-transform: uppercase; 13} 14.main-navigation:after { 15 content: ''; 16 display: block; 17 position: absolute; 18 left: 40px; 19 bottom: 0; 20 width: 220px; 21 border-bottom: 3px solid @ini_theme_color_alt; 22} 23.main-navigation ul { 24 list-style: none; 25 margin: 0; 26 padding-left: 0; 27} 28.main-navigation li { 29 position: relative; 30} 31.main-navigation a { 32 display: block; 33 position: relative; 34 padding: 10px 40px; 35 text-decoration: none; 36 color: @ini_background !important; 37} 38.main-navigation a:hover { 39 background: @ini_theme_color_alt; 40} 41.main-navigation ul ul { 42 display: none; 43 opacity: 0; 44 z-index: 9998; 45 float: left; 46 position: absolute; 47 top: 0; 48 left: 100%; 49 width: 300px; 50 background: @ini_theme_color; 51} 52.main-navigation ul ul li:last-child { 53 border-bottom: none; 54} 55.main-navigation .node > div > a { 56 padding-right: 65px; 57} 58.main-navigation .node > div > a:after { 59 content: ''; 60 display: block; 61 position: absolute; 62 top: 50%; 63 right: 40px; 64 margin-top: -5px; 65 border-left: 5px solid @ini_background; 66 border-top: 5px solid transparent; 67 border-bottom: 5px solid transparent; 68} 69.main-navigation ul > li:hover > ul { 70 display: block; 71 opacity: 1; 72 -webkit-animation: menuFadeIn 0.25s; 73 -moz-animation: menuFadeIn 0.25s; 74 -ms-animation: menuFadeIn 0.25s; 75 -o-animation: menuFadeIn 0.25s; 76 animation: menuFadeIn 0.25s; 77} 78.main-navigation li .curid > a { 79 background: @ini_text_alt !important; 80} 81 82/* Small menu */ 83.menu-toggle { 84 display: none; 85 cursor: pointer; 86 background: @ini_theme_color_alt; 87} 88.dropdown-icon { 89 display: none; 90 background: @ini_theme_color_alt; 91} 92 93/* =Transition 94----------------------------------------------- */ 95 96@-webkit-keyframes menuFadeIn { 97 98 0% { 99 display:none; 100 opacity: 0; 101 } 102 1% { 103 display: block; 104 opacity: 0; 105 } 106 100% { 107 display: block; 108 opacity: 1; 109 } 110 111} 112@-moz-keyframes menuFadeIn { 113 114 0% { 115 display:none; 116 opacity: 0; 117 } 118 1% { 119 display: block; 120 opacity: 0; 121 } 122 100% { 123 display: block; 124 opacity: 1; 125 } 126 127} 128@-ms-keyframes menuFadeIn { 129 130 0% { 131 display:none; 132 opacity: 0; 133 } 134 1% { 135 display: block; 136 opacity: 0; 137 } 138 100% { 139 display: block; 140 opacity: 1; 141 } 142 143} 144@-o-keyframes menuFadeIn { 145 146 0% { 147 display:none; 148 opacity: 0; 149 } 150 1% { 151 display: block; 152 opacity: 0; 153 } 154 100% { 155 display: block; 156 opacity: 1; 157 } 158 159} 160@keyframes menuFadeIn { 161 162 0% { 163 display:none; 164 opacity: 0; 165 } 166 1% { 167 display: block; 168 opacity: 0; 169 } 170 100% { 171 display: block; 172 opacity: 1; 173 } 174 175} 176