二级菜单下拉样式

Question

我有自己的响应式菜单设置，但在桌面大小时，我是隐藏的辅助下拉列表，直到您将鼠标悬停在主导航列表上。

我已将其添加到小提琴中：https://jsfiddle.net/4ewrrbxb/ 我希望辅助菜单位于主菜单的右侧，就在主白框的外面。

我知道这很简单，但我似乎无法让它发挥作用。

任何帮助都会很棒

利

我的HTML是：

<div class="nav-wrap">

<nav id="nav-main">
            <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="products.php">Products</a></li>
            <ul>
              <li>Product One</li>
              <li>Product Two</li>
              <li>Product Three</li>
            </ul>
          <li><a href="trade-processing.php">Trade Processing</a></li>
            </ul>
        </nav>

        <div id="nav-trigger">
            <span>Menu</span>
        </div>
        <!--Close Trigger-->

        <nav id="nav-mobile"></nav>
    <!--Close Trigger-->
   </div>

我的CSS：

/* Menu Wrappers */

.nav-wrap {
    position:fixed;
    top:0px;
    left:0px;
    width:150px;
    padding:25px;
    background: #ffffff;
    z-index:2;
    height: 100%;

    -webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.5);
}


/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
  display: none;
  text-align: center;
}

#nav-trigger span {
    display:inline-block;
    width:auto;
    height:40px;
    border:0px;
    padding:0px 15px;

    font-family: 'montserratregular';
    font-size:16px;
    line-height:40px;
    color:#363940;

    background-color:#e8eaec;
    cursor:pointer;

    position:absolute;
    bottom:23px;
    right:25px;


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

#nav-trigger span:before {
    background-image: url('../images/trigger.svg');
    content:"";
    padding-right: 10px;
    padding-left: 12px;
    background-position: left center;
    background-size: 16px 13px;
    background-repeat: no-repeat;
}

nav {
    height:auto;
    width:auto;
    display:inline-block;

    font-family: 'montserratlight';
    font-size:14px;
    line-height:45px;
    color:#363940;
}

nav#nav-main {
    padding: 0px;
    height:auto;
}

nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom:10px;
}

nav#nav-main li {
    display: inline-block;
    width:100%;
}

nav#nav-main li:last-child {
    border-right: none;
    margin-top:20px;
}

nav#nav-main a {
    display: block;
    width:100%;
    height:45px;
    text-decoration:none;
    cursor: pointer;
    color:#363940;

    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

nav#nav-main a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #E5502F;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
nav#nav-main a:hover:before, nav#nav-main a:focus:before, nav#nav-main a:active:before {
  right: 0;
}

nav#nav-main a:hover {
    cursor: pointer;
    color:#363940;
}

nav#nav-mobile {
    position: relative;
    display: none;
}

nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    top:155px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color:#e8eaec;
    overflow:hidden;

    font-family: 'montserratlight';
    font-size:15px;
    line-height:45px;
    color:#363940;
}

nav#nav-mobile li {
    display: block;
    border-bottom: solid 1px #ffffff;
    height:50px;
    line-height:50px;
}

nav#nav-mobile li:last-child {
      border-bottom: none; }

nav#nav-mobile a {
    display: block;
    color:#000000;
    height:50px;
    text-decoration:none;
  }

nav#nav-mobile a:hover {
    background-color:#E5502F;
    color:#ffffff; }

/* =Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

.nav-wrap {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    padding:0%;
    height:155px;
}

.nav-wrap img {
    display:inline-block;
    vertical-align:top;
    width:150px;
    height:auto;
    position:absolute;
    top:25px;
    left:25px;

}

.phone {
    display:inline-block;
    position:absolute;
    top:23px;
    right:25px;
    margin-bottom:14px;
    letter-spacing:1px;
    text-align:right;

    font-family: 'montserratregular';
    font-size:23px;
    line-height:30px;
    color:#E5502F;
}

.nav-wrap input {
    height:49px;
    border-bottom:0px solid #d5d8db;
    padding-left:15%;

    background: url(../images/search-icon.svg) no-repeat 15px 15px;
    background-position:10px 18px;

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

.nav-wrap input:focus {
    width:85%;
    padding-left:15%;
    background-position:10px 18px;
    background-color:#ffffff;
}


#nav-trigger {
    display: inline-block; }

nav#nav-main {
    display: none; }

nav#nav-mobile {
    display: block; }

.stockist-nav, .supplier-nav {
    display:none;
}




#search-button {
    display:none;
}

#mobile-search {
    display:inline;
    position:absolute;
    bottom:0px;
    right:0px;

    width:35%;
    height:50px;
    background-color:#C8DF55;
    outline:none;
    border:0px;

    font-family: 'montserratlight';
    font-size:15px;
    color:#363940;
    z-index:9999;
}


/* =Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

.nav-inner  {
  max-width:100%;
}


.abovenav-wrapper h3 {
  display:none;
}

}

我的JS：

$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(400);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(400);
            $(this).addClass("open");
        }
    });
});

Answer 1

首先，第二级ul应该放在第一级li里面。所以标记看起来应该是这样的：

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Products</a>
      <ul>
         <li><a href="#">Product One</a></li>
         <li><a href="#">Product Two</a></li>
      </ul>
   </li>
   <li><a href="#">Trade Processing</a></li>
</ul>

然后你只需添加以下css以显示悬停时的等级2：

li > ul {
   display: none;
}

li:hover > ul {
   display: block;
}

要向第一级显示第二级，请向其添加绝对位置：

li {
   position: relative;
}

li > ul {
   position: absolute;
   top: 0;
   left: 100%;
}