body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; } .dropdown-menu { position: absolute; top: calc(100% + 16px); left: 0; background-color: white; border-radius: .3rem; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .1)); width: 16rem; font-family: 'Segoe UI', sans-serif; transition: all .3s ease-in-out; transform: translateX(-30%) translateY(0px); visibility: hidden; opacity: 0; z-index: 1000; margin: 0; } .dropdown-menu.show { visibility: visible; opacity: 1; } .dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .05)); } .dropdown-menu ul { list-style: none; margin: 0; padding: 0; } .dropdown-menu li::after { content: ""; display: block; width: 90%; height: 1px; background-color: #e0e0e0; margin: 0 auto; } .dropdown-menu li:last-child::after { display: none; } .dropdown-menu li:first-child { margin-top: 10px; } .dropdown-menu li:last-child { border-bottom: none; margin-bottom: 10px; } .dropdown-menu a { display: block; padding: 8px 15px; text-decoration: none; color: #111; font-size: 18px; transition: background-color .2s; } .dropdown-menu a:hover { background-color: #f8f9fa; }