CSS full width roll over menu <p>Ive been trying to replicate the top menu of www.sklz.com but using CSS only and no JS. Ive managed to get it 99% there but I'm stuck on one little bug. When the menu is centred, I can't seem to get the drop down section to go below the nav bar (so you can't see it until it drops down below it) but stay above the next div (the yellow bar in this case). What ever I try using z-index etc it either puts the dropdown behind the yellow bar or above the nav bar.</p> <p>So the stack order I want (from low to high) is:</p> <p>1) Yellow bar 2) Dropdown content 3) Nav bar (black 100% width bar) 4) Nav (text for drop downs)</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin:0px; padding:0px; text-align:center; } .navBar { width:100%; background-color:#000; z-index:0; } .nav { width:1000px; margin:0px auto 0px auto; z-index:10; } .dropdown { position: relative; display:block; cursor:pointer; float:left; } .dropdownText { text-decoration:none; padding:20px 20px; background-color:#000; color:#fff; position: relative; margin:0px 0px 0px 0px; font-size:14px; z-index:5; } .dropdownText:hover { color:#FAE400; } .dropdown-content { display: block; position:fixed; left:0; background-color: #f9f9f9; width:100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; margin:-200px 0px 0px 0px; transition:all ease-out .5s; opacity:0; } .dropdown:hover .dropdown-content { display: block; margin:0px 0px 0px 0px; opacity:100; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height:100px; background-color:#212121; z-index:150; position:relative;"&gt;&lt;/div&gt; &lt;div class="navBar"&gt; &lt;div class="nav"&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;PERFORMANCE TRAINING&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;SOCCER&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:49%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:49%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;BASEBALL&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;BASKETBALL&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;GOLF&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;OTHER SPORTS&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;PRO MINI&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;div class="dropdownText"&gt;EXPLORE&lt;/div&gt; &lt;div class="dropdown-content"&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div style="float:left; width:32%"&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Product link 1&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>