HTML CSS

RESPONSIVE DROPDOWN MENU

(quick & simple example)

<nav class="ddmenu">   NORMAL MENU ITEMS   <a href="#">Menu A</a>   <a href="#">Menu B</a>

DROPDOWN MENU HTML

01

  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%; }

CSS - FLAT NAVIGATION BAR

02

POSITION DROPDOWN ITEMS .ddmenu .ddgroup { position: relative; } .ddsub { position: absolute; top: 100%; left: 0; } .ddsub a { display: block; }

CSS - DROPDOWN MECHANISM

03

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; }

CSS - DROPDOWN ARROW

04

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; } }

CSS - RESPONSIVE SUPPORT

05