Blame view
css/top_menu.css
2.06 KB
cf76164e6 20190709 |
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/*@import url(http://fonts.googleapis.com/css?family=Raleway);*/ #top_menu, #top_menu ul, #top_menu ul li, #top_menu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #top_menu:after, #top_menu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #top_menu { width: auto; border-bottom: 3px solid #47c9af; font-family: Raleway, sans-serif; line-height: 1; } #top_menu ul { background: #ffffff; } #top_menu > ul > li { float: left; } #top_menu.align-center > ul { font-size: 0; text-align: center; } #top_menu.align-center > ul > li { display: inline-block; float: none; } #top_menu.align-right > ul > li { float: right; } #top_menu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #top_menu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #top_menu > ul > li.active > a, #top_menu > ul > li:hover > a, #top_menu > ul > li > a:hover { color: #ffffff; } #top_menu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #top_menu > ul > li.active > a:after, #top_menu > ul > li:hover > a:after, #top_menu > ul > li > a:hover:after { background: #47c9af; } |