0
我有我的响应式菜单设置，但是在桌面大小时，我是辅助下拉列表，直到您将鼠标悬停在主导航列表上。二级菜单下拉式样
我已将它添加到小提琴这里：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");
}
});
});