<ul class="menu aii"> <li><a href="">Menu 1</a></li> <li> <a href="">Menu 2</a> <ul class="submenu"> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> </ul> </li> <li> <a href="">Menu 3</a> <ul class="submenu"> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> <li><a href="">Menu 4</a></li> <li><a href="">Menu 5</a></li> </ul>
.aii:before, .aii:after { content: " "; display: table; } .aii:after { clear: both; } .aii { *zoom: 1; } /* Main level */ .menu { margin: 50px auto; width: 800px; width: fit-content; } .menu > li { background: #FE80DF; float: left; position: relative; transform: skewX(25deg); } .menu a { display: block; color: #000; text-transform: uppercase; text-decoration: none; font-family: Arial; font-size: 13px; } .menu li:hover { background: #FE80DF; } .menu > li > a { transform: skewX(-25deg); padding: 1em 2em; } /* Dropdown level*/ .submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; transform: skewX(-25deg); transform-origin: left top; } .submenu li { background-color: #FEBFEF; position: relative; overflow: hidden; } .submenu > li > a { padding: 1em 2em; } .submenu > li::after { content: ''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */ .submenu > li:nth-child(odd){ transform: skewX(-25deg) translateX(0); } .submenu > li:nth-child(odd) > a { transform: skewX(25deg); } .submenu > li:nth-child(odd)::after { right: -50%; transform: skewX(-25deg) rotate(3deg); } /* Even stuff */ .submenu > li:nth-child(even){ transform: skewX(25deg) translateX(0); } .submenu > li:nth-child(even) > a { transform: skewX(-25deg); } .submenu > li:nth-child(even)::after { left: -50%; transform: skewX(25deg) rotate(3deg); } /* Show dropdown */ .submenu, .submenu li { opacity: 0; visibility: hidden; } .submenu li { transition: .2s ease-out transform; } .menu > li:hover .submenu, .menu > li:hover .submenu li { opacity: 1; visibility: visible; } .menu > li:hover .submenu li:nth-child(even){ transform: skewX(25deg) translateX(15px); } .menu > li:hover .submenu li:nth-child(odd){ transform: skewX(-25deg) translateX(-15px); }