Jump to content

CSS based rollover drop-down menu


impressDesign
 Share

Recommended Posts

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>
Link to comment
Share on other sites

The dropdown postiion: absolute; submenu is usually relative to the left edge of parent li which uses position relative, by setting position relative to main parent ul or parent element (such as nav), its left edge would be to that, and you should be able to set its width to match without the need for js.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...