响应式菜单 - 子菜单问题

我把这根头发拉出来..这会很简单，但我无法找到它。响应式菜单 - 子菜单问题

我想要在移动时下拉菜单的子菜单。在其他项目不叮无缝的。像下面的屏幕截图：

你可以看到它住在这里：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; 
    } 
}

来源

2016-06-13 lbollu

这是因为你给李一个固定高度较小小心在你的css文件 –

这不是徘徊它推动你的内容到右侧，而不是下拉菜单。 – frnt

我想通了你的问题。删除li的高度，而不是为li设置填充。请记住，当你使用嵌套列表时，你不必为它们设置绝对位置，只需设置相对位置或根本不设置位置。

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

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

来源

2016-06-13 12:21:12

尽量去除固定高度值设置到贵丽选择&行高，然后指定根据更具体的选择，因为你做了一个混乱，当你使用的行高例如：

行高对该选择器里：

**.menu li**

一个ND做出这个选择另一条线高度：

**.menu li ul li**

和设置父行高时并不比孩子

来源

2016-06-13 12:55:22

响应式菜单 - 子菜单问题

回答

相关问题