Develop Reference

slide and reveal sibling over another sibling element

I am trying to slide a sibling element (yellow) over another sibling element (red) making sure that the yellow never slides over the blue elements, only the red, but I am having a lot of issues with z-indexes. Is there a way to achieve this without z-index maybe? And is it possible to have multiple yellow and red elements in different positions where the yellow element always slides over the red element?
See my progress here, currently the yellow slides over the blue element: https://jsfiddle.net/0qf95eap/25/
JS:
$( document ).ready(function() {
var slideToLeft = $('.yellow');
slideToLeft.show();
slideToLeft.css('z-index','5');
slideToLeft.prev().css('z-index','1');
slideToLeft.next().css('z-index','1');
slideToLeft.nextUntil(".row").css('z-index','10');
slideToLeft.animate({right: "25%"}, 2000);
slideToLeft.prevUntil(".row").css('z-index','5');
slideToLeft.animate({right: "50%"}, 2000);
});
HTML:
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"></li>
<li class="yellow"></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>
CSS:
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
}
li {
display: inline-block;
width: 25%;
height: 200px;
float: left;
position: relative;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.previous {
position: relative;
z-index: 3 !important;
}
.next {
z-index: 9;
}

This works.
$( document ).ready(function() {
var elements = $('.yellow');
for(var i=0;i<elements.length;i++)
{
$(elements[i]).show().css('z-index','50').animate({left: "-100%"}, 2000);
}
});
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
}
li {
display: inline-block;
width: 25%;
height: 200px;
float: left;
position: relative;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
z-index:100;
}
.yellow {
background-color: yellow;
position: absolute;
display: none;
height: 100%;
width: 100%;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>

You can set z-index in the CSS and only for the blue elements.
blue needs to be on top of red and yellow. z-index:1 + position:relative can be set
yellow needs to be on top of red. position:absolute + being next, it will do itself (defaut z-index is 0 ).
red do not need a z-index and can skip the position:relative; to avoid bringing it at top.
$( document ).ready(function() {
var slideToLeft = $('.yellow');
slideToLeft.show();
slideToLeft.animate({right: "25%"}, 2000);
slideToLeft.animate({right: "50%"}, 2000);
});
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
list-style:none;
}
li {
width: 25%;
height: 200px;
float: left;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
position:relative;
z-index:1;
}
.yellow {
background-color: yellow;
position: absolute;
right: 0;
top: 0;
}
.previous {
}
.next {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"></li>
<li class="yellow"></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>
https://jsfiddle.net/0qf95eap/76/

Position absolute dropdown in scrollable container

Is it possible to make the position absolute dropdown stay on top of the scrollable container, and move along with the position relative parent when scrolling? Right now, the dropdown appears within the scrollable area.
The screenshot below is what I want to achieve. I'm also open to javascript solutions if needed.
jsFiddle
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>

An easy way is to make the position of dropdown fixed, but make sure to apply the left and top values accordingly. Another way is to append the dropdown menu outside the ul element, so when it appears it will not be wrapped within it.
.dropdown {
position: fixed;
}
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: fixed;
background-color: #fff;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
Edit
I added one more snippet that does not use fixed position. It changes its coordinates when open based on the parent offset.
$('#menu1, #submenu1').mouseover(function(event) {
$('#submenu1').addClass("show").css($('#menu1').offset());
});
$('#menu1, #submenu1').mouseleave(function(event) {
$('#submenu1').removeClass("show");
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown.show {
display: block;
margin-left: 1px;
background-color: #fff;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
<li id="menu1" class="navbar-item">
<a>Item A</a>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
<ul id="submenu1" class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>

Here's an option using jQuery.
Basically, as others have mentioned, you'll have to move the subnav items outside of the main nav's wrapper, so that they are not hidden.
We can put them in their own wrapper that has a similar markup to the main nav's wrapper, and then match them up using a data element to allow for showing/hiding on click.
Then, when we scroll the main navbar, we can sync the subnav wrapper to that element's scroll position, so the subnav items appear to be fixed to the main nav items.
Lastly, we can hide the subnav wrapper's scroll bar with CSS.
The snippet below should get you the general idea, then you can style it as necessary to make it look more like the primary and secondary nav items are connected.
Click a nav item in the main nav, then scroll to the side to see it in action:
$(function(){
var navbar = $('.navbar');
var subnavBar = $('.subnavs-wrapper .scrollbar-hider');
$(navbar).find('li').each(function(){
var dataId = $(this).attr('data-id');
var matchingUl = $(this).parent().next().find('ul[data-id="' + dataId + '"]');
$(this).on('click', function(){
$(matchingUl).css('visibility') == 'hidden' ?
$(matchingUl).css('visibility', 'visible') : $(matchingUl).css('visibility', 'hidden');
});
$(navbar).on('scroll', function(){
$(subnavBar).scrollLeft($(this).scrollLeft());
});
});
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
display: flex;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
flex-shrink: 0;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
.subnavs-wrapper {
overflow: hidden; /* hide scrollbar */
}
.subnavs-wrapper .scrollbar-hider {
display: flex;
overflow: auto;
padding-bottom: 50px; /* hide scrollbar */
margin-bottom: -50px; /* hide scrollbar */
}
.subnav {
width: 200px;
padding-left: 0;
list-style: none;
visibility: hidden;
flex-shrink: 0;
border: 1px solid black;
}
<ul class="navbar">
<li class="navbar-item" data-id="one"><a>Item A</a>
<li class="navbar-item" data-id="two"><a>Item B</a></li>
<li class="navbar-item" data-id="three"><a>Item C</a></li>
<li class="navbar-item" data-id="four"><a>Item D</a></li>
<li class="navbar-item" data-id="five"><a>Item E</a></li>
</ul>
<div class="subnavs-wrapper">
<div class="scrollbar-hider">
<ul class="subnav" data-id="one">
<li>Sub Item A.A</li>
<li>Sub Item A.B</li>
<li>Sub Item A.C</li>
</ul>
<ul class="subnav" data-id="two">
<li><a>Sub Item B.A</a></li>
</ul>
<ul class="subnav" data-id="three">
<li><a>Sub Item C.A</a></li>
<li><a>Sub Item C.B</a></li>
</ul>
<ul class="subnav" data-id="four">
<li><a>Sub Item D.A</a></li>
<li><a>Sub Item D.B</a></li>
</ul>
<ul class="subnav" data-id="five">
<li><a>Sub Item E.A</a></li>
<li><a>Sub Item E.B</a></li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

Align the drop-down list content under the parent

Above is the result I want, each drop-down list is under the main title.
For example:
A1, A2, A3, A4 is under A when I click the expand collapse button.
B1, B2, B3, B4 is under B when I click the second expand collapse button.
But now my drop-down list is not aligned accordingly. You can check my code for more details. Hoping that some of you could provide me with some advice.
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.es_expandct, .es_expandct1, .es_expandct2 {
display: none;
position:absolute;
padding-top: 20px;
margin: 0 10px;
}
.es_epdtitle, .es_epdtitle1, .es_epdtitle2{
background:url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 30%;
float:left;
background-position:right 0px;
cursor:pointer;
background-color:#ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle, .collapsed .es_epdtitle1, .collapsed .es_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

Add position:relative to parent to make the drop-down position according to it and move float and width from text_maroon_16.. to the parent mobexpand to maintain the width and the style
See code snippet:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
margin: 0 10px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position: right 0px;
cursor: pointer;
background-color: #ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.mobexpand {
position: relative;
width: 30%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

You could always use flex:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
padding: 5px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 100%;
background-position: right center;
cursor: pointer;
background-color: #ccc;
padding: 5px;
margin: 0;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.main-ul {
display: flex;
}
.mobexpand {
padding: 10px;
flex: 1 0 33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-ul">
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

How can i scroll menu to current item in menu?

I have menu that contains 11 elements. 3 of it are displayed. There are buttons like a slider, that helps scrolling this menu. On my site i give special class to element, when its href == url of page(highlighting of current element). I need to move this current element in the first left position of menu on window load, so menu list must be scrolled, when page is loading, and current element stays in the first left place regardless position in list.
So that's my code:
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>
Please help me to supplement my code to solve the problem.
I try this
var curry = document.getElementsByClassName('active')[0];
$(window).load(function() {
curry.style.left = '0px';
});
But nothing happens.

You just need to do a loop of slideR until the first child has the active class by adding the firstLoad function, like in this updated snippet.
firstLoad();
function firstLoad() {
while(!$('#menu > ul > li').first().hasClass("active")) {
slideR();
}
}
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>

Making a drop down nav span the width of the browser even if parent nav has a fixed width

I have a drop-down nav that I want to span the width of the browser (similar to what they have here: iwc), the problem I'm facing is that the parent nav has a fixed width of 960px so the drop down nav is restricted to that width.
Any help? Thanks.
JS
$(document).ready(function() {
$('li.nav').attr('class', 'shownav');//this removes the css class that is targetted by the rules so .js will now take over
$('.menu li.shownav').click(function() {
//will auto slide down content below it for it to fit
$('ul', this).slideToggle();
});
});
HTML
<header>
<div class="wrap">
<nav>
<ul class="menu">
<li>Home</li>
<li class="nav">Services
<ul class="products-nav">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Projects</li>
<li>Projects</li>
<li>Projects</li>
<li>Projects</li>
</ul>
</nav>
</div>
</header>
<div class="banner">
</div>
CSS
.wrap {
margin: 0 auto;
width: 960px;
}
.banner {
background: #007715;
width: 100%;
height: 400px;
color: #FFF;
text-align: center;
}
.menu>li {
display: inline-block;
width: 132px;
text-align: center;
position: relative;
}
.menu>li>a {
color: #007715;
font-size: 0.813em; /* 13px */
font-weight: 700;
height: 120px;
line-height: 120px;
text-transform: uppercase;
}
.menu>li.nav>ul,.menu>li.shownav>ul {
display: none;
position: absolute;
}
.menu>li.nav:hover>ul {
display: block;
}
.products-nav {
background: #FFF;
border-bottom: 1px solid #d2d3d0;
padding: 40px 0;
position: absolute;
width: 100%;
min-width: 960px;
left: 0;
}
.products-nav>li {
width: 25%;
display: inline-block;
}
jsfiddle

Here's a FIDDLE
<li class="nav">Services ▼
<ul class="shownav">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
<li class="nav">Projects ▼
<ul class="shownav">
<li>Submenu 5</li>
<li>Submenu 6</li>
<li>Submenu 7</li>
<li>Submenu 8</li>
</ul>
</li>
.menu li.nav ul,
.menu li.shownav ul {
display: none;
position: absolute;
}
/*
.menu>li.nav:hover>ul {
display: block;
}
*/
.shownav {
background: #fff;
border-bottom: 1px solid #d2d3d0;
padding: 0;
position: absolute;
min-width: 960px;
z-index: 9999;
}
.shownav li {
width: 25%;
display: block;
float: left;
padding: 20px 0;
}
.shownav li:hover {
background: #eee;
}
$(function() {
$('.nav').click(function() {
$('.shownav').slideUp(600);
$(this).find('.shownav')
.css({
width: $(window).innerWidth() + 'px',
left: - $(this).offset().left + 'px'
})
.stop()
.slideDown(600);
});
$('.shownav').mouseleave(function() {
$(this).slideUp(600);
});
});