导航栏-导航 导航栏右下拉内容不会在移动设备上向下推送菜单项

Question

我正在尝试创建一个带有导航导航栏导航栏右侧的下拉菜单。我让它在移动设备(较小的屏幕(上对齐，但是当我单击下拉菜单时，它不会向下推送菜单项，而是下拉菜单到其他菜单项上。我不确定如何解决这个问题。

同样，当我使桌面浏览器屏幕变小并且折叠开始时;当我将鼠标悬停在下拉菜单上时，当我将光标从父项移向子项时，子菜单就会消失。

我正在尝试使用一个下拉元素制作此菜单。但是下拉菜单的子元素不会在移动视图上向下推送其他菜单项。这是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;

}

Answer 1

我对你的代码进行了彻底的更改。

它在台式机和移动设备上完美运行。

$("#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>