| .main-nav { |
| //display: none; |
| float: right; |
| ul { |
| padding: 0; |
| margin: 0; |
| list-style: none; |
| -webkit-font-smoothing: subpixel-antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| li { |
| display: inline; |
| position: relative; |
| float: left; |
| &:hover { |
| background: $color-systemml-accent; |
| } |
| a { |
| color: #fff; |
| font-weight: $font-weight-medium; |
| display: block; |
| padding: 10px; |
| @media (min-width: $bp-medium) { |
| padding: 20px; |
| } |
| &:hover { |
| color: #fff; |
| } |
| .icon-chevron-down { |
| top: -1px; |
| background-size: 10.987px 6.201px; |
| width: 10.987px; height: 6.201px; |
| margin-left: 10px; |
| } |
| } |
| } |
| ul { |
| display: none; |
| background-color: #f9f9fb; |
| border: 1px solid #e0e0e0; |
| border-width: 0 1px 1px 1px; |
| } |
| } |
| |
| li ul { |
| position: absolute; |
| right: 0; |
| top: 66px; |
| min-width: 200px; |
| li { |
| width: 100%; |
| a { |
| color: #152935; |
| padding: 5px 20px; |
| transition: $transition-default; |
| &:hover { |
| color: #fff; |
| background: $color-systemml-accent; |
| } |
| } |
| } |
| } |
| ul li:hover > ul { |
| display: block; |
| } |
| @media (min-width: $bp-medium) { |
| display: block; |
| } |
| } |