<div class="nav"> <ul> <li><a href="">Menu 1</a></li> <li class="dropdown"><a href="">Menu 2</a> <ul> <li><a href="">Sub Menu 1</a></li> <li><a href="">Sub Menu 2</a></li> <li><a href="">Sub Menu 3</a></li> </ul> </li> <li><a href="">Menu 3</a></li> </ul> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Verdana, sans-serif; font-size: 13px; } .nav { background: #3c3c3c; display: flex; justify-content: flex-end; &>ul { margin: 0; &>li { display: inline-block; position: relative; &:hover { background: #00aaff; &.dropdown { li:hover { background: #00aaff; } } } &.dropdown { &>a { position: relative; padding-right: 40px; &:after { content: ''; position: absolute; right: 15px; width: 6px; height: 6px; border-width: 0 2px 2px 0; border-color: #fff; border-style: solid; transform: rotate(45deg); top: 18px; } } &:hover { ul { max-height: 150px; transition: .2s linear; } } ul { max-height: 0; overflow: hidden; } } a { padding: 15px; display: block; color: #fff; text-decoration: none; } &>ul { margin: 0; position: absolute; list-style: none; width: 180px; right: 0; background: #484848; li { margin: 0; a { margin: 0; } } } } } }