lbollu lbollu - 5 months ago 12
CSS Question

Responsive Menu - Sub menu issue

Im pulling my hair out on this one.. It's going to be something simple but I cant find it.

I want the sub menu when on mobile to drop down. Not hover over the other items.. Like the screen shot below:
enter image description here

You can see it live here: http://pagedev.co.uk/andrews/live/#

Here is my html:

<div class="header-wrapper">

<div class="nav-wrapper">
<div class="nav-inner">


<img class="logo" src="images/andrews-logo.svg">

<a href="#" class="open-panel"><img src="images/open-nav.svg"></a>

<nav>
<a href="#" class="close-panel"><img src="images/close-nav.svg"></a>
<ul class="menu">
<li class="business haschild"><a href="#">Business</a>
<ul>
<li><a href="#"><img src="http://placehold.it/200x160"> Insurance for shops</a></li>
<li><a href="#"><img src="http://placehold.it/200x160"> Insurance for shops</a></li>
<li><a href="#"><img src="http://placehold.it/200x160"> Insurance for shops</a></li>
</ul>
</li>
<li class="landlord" ><a href="#">Landlord</a></li>
<li class="home haschild" ><a href="#">Home</a>
<ul>
<li><a href="#"><img src="http://placehold.it/200x160"> Insurance for shops</a></li>
<li><a href="#"><img src="http://placehold.it/200x160"> Insurance for shops</a></li>
</ul>
</li>
<li class="vehicle" ><a href="#">Vehicle</a></li>
<li class="liability" ><a href="#">Liability</a></li>
<li class="quote" ><a href="#">Get a Quote</a></li>
</ul>
</nav>


</div>
</div>
<!-- Close Nav -->


<div class="nav-bottom">
Content

</div>

</div>
<!-- Close Header -->


Here is my css:

/* ==============================
NAV STYLES
============================== */

/* Header Styles */
.header-wrapper {
width:100%;
height:225px;
margin:0px auto;
}


/* Main Styles */
.nav-wrapper {
width:100%;
height:auto;
margin:0px auto;
background-color:$dark;
position:relative;
text-align:right;
z-index:9999999;
}

.nav-inner {
max-width:1100px;
width:90%;
height:auto;
margin:0px auto;
position:relative;
}

.logo {
width:40%;
max-width:200px;
height:auto;
position:absolute;
top:0px;
left:0px;
}


nav {
width:80%;
height:auto;
display:inline-block;
padding:0px;
margin:0px;
}

nav a {
color: $white;
text-decoration:none;
}

/* Important stuff */
.menu {
padding: 0px;
width: 100%;
}


.menu li {
width: 16%;
height:72px;

font-family: $light-font;
font-size:14px;
line-height:72px;

list-style-type: none;
display: inline-block;
text-align: center;
margin-right:-4px;
position:relative;
}


.menu li ul {
width:auto;
height:auto;
display:none;
top:75px;
left:0px;
position:absolute;
text-align:left;
background-color:#ffffff;
z-index:998;

-webkit-box-shadow: 0px 7px 10px 0px rgba(228,228,228,0.66);
-moz-box-shadow: 0px 7px 10px 0px rgba(228,228,228,0.66);
box-shadow: 0px 7px 10px 0px rgba(228,228,228,0.66);
}

.menu li:hover > ul {
display:table;
}

.menu li ul li {
height:auto;
background-color: #fafafa;
display:table-cell;

border-right:1px solid #e5e5e5;
border-bottom:4px solid $pri-color;

font-family: $bold-title;
font-size:21px;
line-height:24px;
text-align: center;
margin-right:-4px;
padding:45px 20px;

opacity:0.7;

transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.menu li ul li:hover {
background-color: $white;
opacity:1;
}

.menu li ul li a {
color: $dark;
}


.menu li ul li:last-child {
border-right:none;
}

.menu li ul li img {
width:120px;
height:auto;
display:block;
margin:0px 25px 20px 25px;
}



.business {
border-right:1px solid #575759;
border-bottom:3px solid $business;
}

.business:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $business;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.business:hover, .business:focus, .business:active {
color: $dark;
}
.business:hover:before, .business:focus:before, .business:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.landlord {
border-right:1px solid #575759;
border-bottom:3px solid $landlord;
}

.landlord:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $landlord;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.landlord:hover, .landlord:focus, .landlord:active {
color: $dark;
}
.landlord:hover:before, .landlord:focus:before, .landlord:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


.home {
border-right:1px solid #575759;
border-bottom:3px solid $home;
}

.home:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $home;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.home:hover, .home:focus, .home:active {
color: $dark;
}
.home:hover:before, .home:focus:before, .home:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.vehicle {
border-right:1px solid #575759;
border-bottom:3px solid $vehicle;
}

.vehicle:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $vehicle;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.vehicle:hover, .vehicle:focus, .vehicle:active {
color: $dark;
}
.vehicle:hover:before, .vehicle:focus:before, .vehicle:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.liability {
border-right:1px solid #575759;
border-bottom:3px solid $liability;
}

.liability:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $liability;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.liability:hover, .liability:focus, .liability:active {
color: $dark;
}
.liability:hover:before, .liability:focus:before, .liability:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


.quote {
border-right:0px solid #363636;
border-bottom:3px solid #363636;
background-color:#363636;

transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}

.quote:hover {
border-bottom:3px solid $cta;
background-color:$cta;
}


/* If has child */
.haschild:after {
content: url('../images/drop-arrow.svg');
margin-left:6px;
}





/* Open Close Panel */
a.open-panel, a.close-panel {
display: none;
}

.open {
width:75px;
height:75px;
background-image: url("../images/open-nav.svg");
display:block;
}


@media only screen and (max-width: 960px) {


.nav-inner {
width:100%;
}

.logo {
left:5%;
}


/* Move nav off screen, setup transitions */
nav {
width: 80%;
position: absolute;
left: -80%;
top: 0px;
height: 100vh;
margin-left:0px;
background-color:$dark;
}

nav a {
color: $white;
text-decoration:none;
}

/* Display nav items vertically */
.menu {
background-color: $dark;
}

.menu li {
width: 80%;
height:65px;
padding-left:20%;

font-family: $light-font;
font-size:15px;
line-height:70px;

display: block;
margin-right:0px;
position:relative;
text-align:left;
border-right:0px;
}


.menu li ul {
width:105%;
height:65px;
display:none;
top:-3px;
left:-5%;
position:relative;
text-align:left;
z-index:998;
padding:0px;

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}


.menu li ul li {
width:100%;
height:66px;
background-color: $white;
display:block;
position: relative;
border-right:0px ;
border-bottom:1px solid #e5e5e5;;

font-family: $light-font;
font-size:15px;
line-height:66px;
margin-right:0px;

padding:0px 0px 0px 5%;
opacity:1;
text-align:left;
margin-left:-6%;
}

.menu li ul li:nth-child(2n) {
background-color: #fafafa;
}

.menu li ul li a {
color: $dark;
}


.menu li ul li:last-child {
border-right:none;
}

.menu li ul li img {
display:none;
}


/* Reveal open/close buttons */
a.open-panel, a.close-panel {
display: inline;
}

.business {
border-bottom:2px solid $business;
background-color: $business;
}

.landlord {
border-bottom:2px solid $landlord;
background-color: $landlord;
}

.home {
border-bottom:2px solid $home;
background-color: $home;
}

.vehicle {
border-bottom:2px solid $vehicle;
background-color: $vehicle;
}

.liability {
border-bottom:2px solid $liability;
background-color: $liability;
}



.openNav #page {
left: 0;
-webkit-transform: translate3d(70%, 0, 0);
-moz-transform: translate3d(70%, 0, 0);
-ms-transform: translate3d(70%, 0, 0);
-o-transform: translate3d(70%, 0, 0);
transform: translate3d(70%, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}

/* When the panel is closed, transition the page back to the left */
#page {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
}

Answer

I figured out your problem. Remove the height to li, and instead of that set padding to li. Remember that, when u use nested lists, you do not have to set position absolute to them, just set position relative or do not set position at all.

.menu li {
 padding-top: 29px;
 padding-bottom: 29px;
}

.menu li ul {
  position: relative;
  top: 0;
  }