Responsive dropdown navigation using css flexbox and no jquery

Question

I am building a responsive menu with dropdowns using only css and no jQuery. New to flexbox and struggling to get the dropdown aligned correctly. The following code works except for the dropdown stuff which will be misaligned - tried with standard stuff like position:relative.

I am using a checkbox ( .toggle ) to show/hide the hamburger. Hoping for some pointers.

Here is my code: (also JSFiddle here )

  nav { margin:0 auto; max-width:700px; width:100%; } .menu {background:#28303a;padding:0;margin:0;max-width:700px;height:50px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; list-style-type: none; } .menu li a {padding:10px;border-radius:5px;align-self:center;} .menu li a:hover { background: #0093bb;} #checkbox1,.toggle { display: none;} /* handle smaller screens here */ @media screen and (max-width: 550px) { .menu { flex-direction: column; height: 0px; } .menu li { display: flex; align-self: center; width:100%; /* hide until user clicks on hamburger */ opacity: 0; visibility: hidden; } .menu li a { width: 100%; text-align: center; align-self: center; align-content: center; } .toggle { color:#fff; clear: both; display: block; text-align: center; line-height: 40px; cursor: pointer; width: 100%; height: 40px; } .toggle:hover { background: #0093bb; } #checkbox1:checked + label .menu li { /* show menu - user clicked on hamburger */ opacity: 1; visibility: visible; } #checkbox1:checked + label .menu { height: 200px; } } /* standard */ body {font-family: 'Open Sans';font-size:15px} a{text-decoration:none;color:#fff} .container {background:#28303a;} 

 <div class="container"> <nav> <input type="checkbox" id="checkbox1" /> <label for="checkbox1"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Sub items 1</a> <!-- sub items below / this won't work: <ul class="menu"> <li><a href="#">Sub 1a</a></li> <li><a href="#">Sub 1b</a></li> </ul> --> <li><a href="#">Sub items 2</a></li> <li><a href="#">Contact</a></li> </ul> <span class="toggle">☰</span> </label> </nav> </div> 

UPDATE : This is the code I finally got working. Tested in Edge, Chrome (pc/mobile), Firefox, IE 10-11 (below IE10 --> good luck :). In addition to updated CSS, I moved the whole <ul class="menu"> stuff outside of the <label for...> as the old code was not W3C compliant.

 /* standard */ body {font-family: 'Open Sans';font-size:15px} a {text-decoration:none;color:#fff} /* code for responsive css dropdown starts here: */ .container { background: #28303a; padding-bottom: 10px; display: flex; justify-content: center; } nav { box-sizing: border-box; background: #28303a; margin: 0; padding: 0; } nav label { padding: 0; margin: 0 } nav ul { padding: 0; margin: 0; display: flex; flex-direction: row; } nav li { list-style-type: none; padding:0 10px; margin:0; font-size:16px; line-height:16px; } nav a, #checkbox1, .toggle { font-size: 16px; color: #fff; width: 100%; display: block; line-height: 16px; } /* hide sub menu initially */ nav > ul > li ul { display: none; } /* show sub menu on parent hover */ nav > ul > li:hover ul { display: block; background: #28303a } /* position sub menu */ ul ul { position: absolute; } ul ul > li { padding: 5px 8px; } /* toggle button hidden initially */ #checkbox1, .toggle { display:none; } @media screen and (max-width:768px) { nav { width: 100% } nav ul { flex-direction: column; } nav > ul > li { justify-content: center; text-align: center; align-items: center; align-content: center; width: 100%; padding:0; height:0; /* set height to 0 so the menu won't take up space, until toggle=open*/ opacity:0; visibility: hidden; } /* position sub menu */ ul ul { position: relative } /* remove padding from sub menu items */ ul ul > li { padding:0; } /* set padding for all a elements */ nav a { padding: 3px 0; } nav a:hover { background: #0093bb; } .toggle { color: #fff; clear: both; display: block; text-align: center; cursor: pointer; width: 100%; padding: 0; margin: 0; } .toggle:hover { background: #0093bb; } /* show menu - user clicked on hamburger */ #checkbox1:checked + label + ul.menu > li { opacity: 1; visibility: visible; height: auto; } } 

 <div class="container"> <nav> <input type="checkbox" id="checkbox1" /> <label for="checkbox1"><span class="toggle">&equiv;</span></label> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Sub items 1</a> <ul> <li><a href="#">Sub 1a</a></li> <li><a href="#">Sub 1b</a></li> </ul> <li><a href="#">Sub items 2</a> <ul> <li><a href="#">Sub 2a</a></li> <li><a href="#">Sub 2b</a></li> <li><a href="#">Sub 3c</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> </div> 

Answer 1

I did not use .toggle, I just used nested lists and css.

 nav{ margin-top:15px } nav ul{ list-style:none; position:relative; float:left; margin:0; max-width:700px; width:100%; background:#28303a; height:50px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } nav ul a{ display:block; color: #993; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; padding:10px; border-radius:5px; align-self:center; } nav ul li{ position:relative; float:left; margin:0; padding:0 } nav ul li.current-menu-item{ background:#ddd } nav ul li:hover{ background: #0093bb; } nav ul ul{ display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } nav ul ul li{ float:none; width:200px } nav ul ul a{ line-height:120%; padding:10px 15px } nav ul ul ul { top:0; left:100% } nav ul li:hover > ul { display:block } /* standard */ body { font-family: 'Open Sans'; font-size:15px } a{ text-decoration:none; color:#fff; } 

 <nav id="nav"> <ul> <li class="current-menu-item"><a href="#">Home</a></li> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Sub Sub Menu 1</a></li> <li><a href="#">Sub Sub Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a> <ul> <li><a href="#">Sub Sub Menu 1</a></li> <li><a href="#">Sub Sub Menu 2</a></li> </ul> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

Here's the Codepen . Ps. I didn't do the version for smaller screens, so you still need to do that yourself.