在非移动设备上查看时,下拉的“服务”菜单不起作用。折叠菜单但无法在导航栏中使用时 我还看到了有关下拉列表在移动设备上不起作用的其他问题,但就我而言,情况恰恰相反。 See site here
这是我的blade.php文件的导航部分
<nav class="fh5co-nav" role="navigation">
<div class="top">
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<a href="tel:+18188690606" data-toggle="tooltip" data-placement="bottom" title="+1 818 869 0606"><i class="fa fa-phone" aria-hidden="true"></i><img src="images/button.png"></a>
</div>
</div>
</div>
</div>
<div class="top-menu">
<div class="container">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo">
<a href="/" class="nav-brand"><img src="images/log.png" alt=""></a> </div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<!-- <li class="active"><a href="index.html">Home</a></li> -->
<li><a href="{{URL::to('/')}}">Home</a></li>
<li><a href="{{URL::to('/about')}}">About</a></li>
<li class="has-dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Services<b class="caret"></b></a>
<ul class="dropdown">
<li><a href="{{URL::to('/emergency')}}">Emergency</a></li>
<li><a href="{{URL::to('/commercial')}}">Commercial</a></li>
<li><a href="{{URL::to('/waterheater')}}">Water heater</a></li>
<li><a href="{{URL::to('/sewer')}}">Sewers</a></li>
</ul>
</li>
<li><a href="{{URL::to('/contact')}}">Contact</a></li>
<!--<li class="btn-cta"><a href="#"><span>Login</span></a></li>-->
</ul>
</div>
</div>
</div>
</div>
</nav>
这是CSS
.fh5co-nav ul li.has-dropdown {
position: relative;
}
.fh5co-nav ul li.has-dropdown .dropdown {
width: 140px;
-webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 40px;
left: 0;
text-align: left;
background: #000;
padding: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.fh5co-nav ul li.has-dropdown .dropdown:before {
bottom: 100%;
left: 40px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #000;
border-width: 8px;
margin-left: -8px;
}
.fh5co-nav ul li.has-dropdown .dropdown li {
display: block;
margin-bottom: 7px;
}
.fh5co-nav ul li.has-dropdown .dropdown li:last-child {
margin-bottom: 0;
}
.fh5co-nav ul li.has-dropdown .dropdown li a {
padding: 2px 0;
display: block;
color: #999999;
line-height: 1.2;
text-transform: none;
font-size: 13px;
letter-spacing: 0;
}
.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
color: #fff;
}
.fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a {
color: #fff;
}
.fh5co-nav ul li.btn-cta a {
color: #fff;
}
.fh5co-nav ul li.btn-cta a span {
background: #ff0000;
padding: 4px 20px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
}
.fh5co-nav ul li.btn-cta a:hover span {
-webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}
.fh5co-nav ul li.active > a {
color: #fff !important;
}
在这里,我是下拉菜单的
$('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
$('#fh5co-offcanvas')
.find('li')
.removeClass('has-dropdown');
// Hover dropdown menu on mobile
$('.offcanvas-has-dropdown').mouseenter(function(){
var $this = $(this);
$this
.addClass('active')
.find('ul')
.slideDown(500, 'easeOutExpo');
}).mouseleave(function(){
var $this = $(this);
$this
.removeClass('active')
.find('ul')
.slideUp(500, 'easeOutExpo');
});