Line 47: | Line 47: | ||
<style> | <style> | ||
− | |||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
Line 581: | Line 497: | ||
+ | #navbar { | ||
+ | position: fixed; | ||
+ | z-index: 9999; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 96px; | ||
+ | box-sizing: border-box; | ||
+ | padding-right: 64px; | ||
+ | padding-top: 48px; | ||
+ | background: #fff; | ||
+ | box-shadow: 5px 10px 18px #eee; | ||
+ | } | ||
+ | .navlink { | ||
+ | position: relative; | ||
+ | float: right; | ||
+ | height: 32px; | ||
+ | font-size: 20px; | ||
+ | color: #000; | ||
+ | padding-right: 32px; | ||
+ | } | ||
+ | |||
+ | .navlink:after { | ||
+ | content: ""; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 80%; | ||
+ | left: 0; | ||
+ | height: 2px; | ||
+ | width: 38px; | ||
+ | background: #bba5ef; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | |||
+ | .navlink:hover:after { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .firstnav:after { | ||
+ | content: ""; | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | top: 80%; | ||
+ | left: 0; | ||
+ | height: 2px; | ||
+ | width: 38px; | ||
+ | background: #bba5ef; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | |||
+ | .navlink:hover~.firstnav:after { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .navlink:hover>.navdrop { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .navdrop { | ||
+ | box-shadow: 5px 10px 18px #eee; | ||
+ | border-radius: 4px; | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | top: 100%; | ||
+ | left: 0; | ||
+ | background: #fff; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | |||
+ | .subnavlink { | ||
+ | border-radius: 4px; | ||
+ | font-size: 12px; | ||
+ | background: #fff; | ||
+ | color: #222; | ||
+ | padding: 8px; | ||
+ | box-sizing: border-box; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | |||
+ | .subnavlink:hover { | ||
+ | background: #5ab6dd; | ||
+ | color: #fff; | ||
+ | } | ||
Revision as of 06:06, 9 September 2018