Я пытаюсь создать выпадающее меню с помощью 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;
}