響應式菜單 - 子菜單問題

Question

我把這根頭髮拉出來..這會很簡單，但我無法找到它。

我想要在移動時下拉菜單的子菜單。在其他項目不叮無縫的。像下面的屏幕截圖：

你可以看到它住在這裏：http://pagedev.co.uk/andrews/live/#

這裏是我的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 --> 

這裏是我的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 1

我想通了你的問題。刪除li的高度，而不是爲li設置填充。請記住，當你使用嵌套列表時，你不必爲它們設置絕對位置，只需設置相對位置或根本不設置位置。

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

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

Answer 2

儘量去除固定高度值設置到貴麗選擇&行高，然後指定根據更具體的選擇，因爲你做了一個混亂，當你使用的行高例如：

行高對該選擇器裏：

**.menu li** 

一個ND做出這個選擇另一條線高度：

**.menu li ul li** 

和設置父行高時並不比孩子