<ul class="menu"> <li class="parent"><a href="#">Parent</a> <ul> <li><a href="#">Child</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Grand Child</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Great Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>
ul.menu { position: relative; margin-bottom:0; li { position: relative; float: left; zoom:1; list-style: none; a { display: block; padding:.382em 1em; background:#eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } &.parent { // Styles applied to all parent list items > a:after { content:"\2193"; line-height:1; margin-left:1em; float:right; } } } /* CHILDREN */ ul { width:10em; visibility: hidden; // Optionally use display:none to avoid horizontal scrollbars position: absolute; top:100%; left: 0; z-index: 9999; margin:0; li { float: none; a { width: 100%; display: inline-block; } &.parent { > a:after { content:"\2192"; } } } } ul ul { left:100%; top:0; } li:hover > ul { visibility: visible; } }