我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定如何解决这个问题。
此外，当我将桌面浏览器屏幕变小并且开始崩溃时；当我将鼠标悬停在下拉菜单上时，当我将光标从父项移向子项时，子菜单消失。
我正在尝试使用一个下拉元素制作此菜单。但是下拉菜单的子元素不会在移动 View 中将其他菜单项向下推。这是 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;
最佳答案
我对您的代码进行了彻底的更改。
它在桌面和移动设备上完美运行。
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #141414;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
font-weight: bold;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #070707;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
#cssmenu.small-screen ul ul form {
width: 100%;
font-weight: bold;
color: #dddddd;
background: none;
}
.form{
color: #dddddd;
}
#cssmenu ul ul form{
background: #333333;
width: 400px;
}
#cssmenu.small-screen ul ul form {
font-weight: bold;
color: #dddddd;
background: none;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #a5a5a5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #696969;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-fw fa-bars"></i> Tours</a>
<ul>
<li><a href="#">ATM Cave</a></li>
<li><a href="#">Pine Ridge Tour</a></li>
<li><a href="#">Caracol Site</a></li>
<li><a href="#">Horseback Riding</a></li>
<li><a href="#">Cave Tubing w/ Zip</a></li>
<li><a href="#">Tikal Tours</a></li>
<li><a href="#">Barton Creek</a></li>
<li><a href="#">Zip-lining</a></li>
<li><a href="#">Canoeing/Kayaking</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-codepen"></i> Packages</a></li>
<li><a href="#"><i class="fa fa-fw fa-clone"></i> Shuttle</a></li>
<li><a href="#"><i class="fa fa-fw fa-cc-mastercard"></i> Pay</a></li>
<li><a href="#"><i class="fa fa-fw fa-info"></i> About Us</a></li>
<li class="slow"><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a>
<ul>
<form class="form" action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Syria</option>
<option value="canada">Turky</option>
<option value="usa">Switzerland</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</ul>
</li>
</ul>
</div>
</body>
</html>关于jquery - nav navbar-nav navbar-right 下拉内容不会在移动设备上向下推送菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50633901/