响应式菜单 - 子菜单问题

时间：2016-06-13 11:41:19

标签： jquery html css

我把头发拉到这个上面......它会变得简单，但我找不到它。

我希望在移动设备上下拉子菜单。不要将鼠标悬停在其他项目上..如下面的屏幕截图： enter image description here

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

2 个答案:

答案 0 :(得分：2)

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

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

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

答案 1 :(得分：0)

尝试删除您设置为li选择器的固定高度值＆amp; line-height，然后根据更具体的选择器指定行高，导致您在使用时产生混淆：

此选择器中li的行高：

**.menu li**

并为此选择器设置了另一个行高：

**.menu li ul li**

在设置父级的行高不小于子级

时要小心
相关问题
最新问题