I was wondering if anyone out there can tell me a better way to replicate the main menu on the site www.sklz.com. Its a basic dropdown menu but the dropdown section is full width (instead of being under the menu item itself). Im assuming that the menu on this site is JavaScript driven but I was hoping to make it purely from CSS. I am open to doing a JS or JQuery based one if there is an easy solution but as mention, would prefer CSS. Ive played around and come up with the below CSS based solution but I'm not sure its the best way to do it... CSS
------------
body {
margin:0px;
padding:0px;
text-align:center;
}
.dropdown {
position: relative;
display:block;
cursor:pointer;
width:25%;
float:left;
}
.dropdownText {
text-decoration:none;
padding:20px 0px;
background-color:#000;
color:#fff;
position: relative;
z-index:20;
margin:0px 0px 0px 0px;
}
.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;
z-index: 10;
margin:-200px 0px 0px 0px;
transition:all ease-out 1s;
}
.dropdown:hover .dropdown-content {
display: block;
margin:0px 0px 0px 0px;
}
HTML
------------------
<div style="width:100%; z-index:5; position:relative;">
<div class="dropdown">
<div class="dropdownText">Mouse over me 1</div>
<div class="dropdown-content">
<div style="float:left; width:32%">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
<div style="float:left; width:32%">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
<div style="float:left; width:32%">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdownText">Mouse over me 2</div>
<div class="dropdown-content">
<div style="float:left; width:49%">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
<div style="float:left; width:49%">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdownText">Mouse over me 3</div>
<div class="dropdown-content">
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
<p><a href="#">Product link 1</a></p>
</div>
</div>
<div class="dropdown">
<div class="dropdownText">Mouse over me 4</div>
<div class="dropdown-content">
<p><a href="#">Product link 1</a></p>
</div>
</div>
<div style="clear:both;"></div>
</div>