impressDesign Posted March 20, 2016 Share Posted March 20, 2016 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 More sharing options...
dsonesuk Posted March 20, 2016 Share Posted March 20, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now