【发布时间】：2018-05-31 22:56:12
【问题描述】：
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备（较小的屏幕）上对齐，但是当我单击下拉菜单时，它不会将菜单项向下推，而是而不是其他菜单项的下拉菜单。我不知道如何解决这个问题。
当我将桌面浏览器屏幕变小并且崩溃开始时；当我将鼠标悬停在下拉菜单上时，当我将光标从父项移向子项时，子菜单就会消失。
我正在尝试使用一个下拉元素制作此菜单。但下拉的子元素不会将其他菜单项向下推到移动视图上。这是HTML和CSS。在桌面上它悬停很大，但链接不起作用。在移动设备上，它会单击但不会将菜单项向下推。希望我能得到一些帮助。
HTML 代码：
<header class="top-area">
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="logo">
<a href="index.html">
Yaxche<span>Adventure</span>Tours
</a>
</div><!-- /.logo-->
</div><!-- /.col-->
<div class="col-sm-10">
<div class="main-menu">
<!-- Brand and toggle get grouped for better
mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button><!-- / button-->
</div><!-- /.navbar-header-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">home</a></li>
<li class="dropdown" data-
toggle="dropdown" data-target=".navbar-collapse"><a href="belize-
tours.html">Tours<i class="fa fa-caret-down"></i></a>
<ul class="dropdown-content">
<li><a href="belize-atm-cave-
tour.html">ATM Cave</a></li>
<li><a href="mountain-pine-ridge-
belize.html">Pine Ridge Tour</a></li>
<li><a href="caracol-belize-
tour.html">Caracol Site</a></li>
<li><a href="horseback-riding-
belize.html">Horseback Riding</a></li>
<li><a href="cave-tubing-belize-
tour.html">Cave Tubing w/ Zip</a></li>
<li><a href="visiting-tikal-from-
belize.html">Tikal Tours</a></li>
<li><a href="barton-creek-cave-tour-
belize.html">Barton Creek</a></li>
<li><a href="belize-zip-lining-
tours.html">Zip-lining</a></li>
<li><a href="belize-river-canoeing-
kayaking-tours.html">Canoeing/Kayaking</a></li>
</ul>
</li>
<li><a href="belize-tour-
packages.html">Packages</a></li>
<li><a href="belize-shuttle-
service.html">Shuttle</a></li>
<li><a href="belize-tour-
payment.html">Pay</a></li>
<li><a href="about-yaxche-adventure-
tours.html">About Us</a></li>
<li>
<form action="contact-us.html">
<button class="book-btn"
type="submit">book now
</button></form>
</li><!--/.project-btn-->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.main-menu-->
</div><!-- /.col-->
</div><!-- /.row -->
<div class="home-border"></div><!-- /.home-border-->
</div><!-- /.container-->
</div><!-- /.header-area -->
</header><!-- /.top-area-->
<!-- main-menu End -->
CSS 样式：
.main-menu {position:relative;}
.main-menu ul .nav .navbar-nav {
text-align:right;
float:none;
}
.main-menu .nav li {
position:relative;
z-index: 1;
padding: 5px 12px 0px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition: all 0.2s linear;
}
.main-menu .nav li a {
padding: 11px 0 29px;
color: #fff;
font-size: 16px;
text-transform: capitalize;
font-family: 'Poppins', sans-serif;
font-weight:500;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.main-menu .nav li.active a,
.main-menu .nav li a:hover,
.main-menu .nav li a:focus {
color: #00d8ff;
background-color:transparent;
text-align: center;
}
.main-menu .nav a:before {
position: absolute;
content: "";
width: 0px;
height: 2px;
bottom: -2.4px;
left: 0;
background: transparent;
-webkit-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.main-menu .nav li.active a:before,
.main-menu .nav a:hover:before {
background: #00d8ff;
width: 100%;
}
.nav.navbar.open {
margin-bottom: 160px;
}
.main-menu .navbar-toggle {
margin-top: 5px;
border: 1px solid;
font-size: 16px;
float:left;
}
.main-menu .navbar-toggle {
color: #00d8ff;
}
.main-menu .navbar-default .navbar-toggle:focus,
.main-menu .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.home-border{
border-top:2px solid #fff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
font-family: 'Poppins', 'san-serif';
text-decoration: none;
background-color: transparent;
display: block;
}
.dropdown-content a:hover {background-color: #00d8ff}
.dropdown:hover .dropdown-content {
display: block;
color: #00d8ff;
}
.dropdown-content:hover {
background-color: darkgray;
}
.dropdown:hover .dropbtn {
background-color: transparent;
}
.sub {
display: none
}
.navigation:hover .sub {
display: block;
position: absolute;
z-index: 100;
}
【问题讨论】：
-
你能澄清你的问题，并发布相关代码。通过演示，您将更快地获得帮助。
-
我已经进行了必要的编辑以使问题更加清晰。每当用户选择带有下拉菜单的链接时，我都会尝试下推我的内容菜单内容。但是，当我单击下拉菜单时，会越过内容（菜单项也是如此）而不是向下推。
标签： jquery html css navigation nav