nav navbar-nav navbar-right下拉内容不会在移动设备上按下菜单项

Question

我正试图使用​​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 Styes：

.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>