HTML CSS
(quick & simple example)
<nav class="ddmenu"> NORMAL MENU ITEMS <a href="#">Menu A</a> <a href="#">Menu B</a>
DROPDOWN GROUP <div class="ddgroup"> Menu C <div class="ddsub"> <a href="#">Sub A</a> <a href="#">Sub B</a> </div> </div> </nav>
EQUALLY SPACED HORIZONTAL MENU .ddmenu { display: flex; } .ddmenu a, .ddmenu .ddgroup { width: 100%; }
POSITION DROPDOWN ITEMS .ddmenu .ddgroup { position: relative; } .ddsub { position: absolute; top: 100%; left: 0; } .ddsub a { display: block; }
ONLY SHOW DROPDOWN ITEMS ON HOVER .ddsub { display: none; } .ddgroup:hover .ddsub { display: block; }
ADD DROPDOWN ARROW .ddgroup::after { content: "\27A4"; position: absolute; top: 13px; right: 10px; }
ROTATE ARROW ON HOVER .ddgroup:hover:after { transform: rotate(90deg); }
BREAK INTO SINGLE COLUMN ON SMALL SCREEN @media screen and (max-width: 640px) { .ddmenu { flex-wrap: wrap; } .ddsub { position: static; } }