我的网站中有一个导航栏，我正在使用Bootstrap scrollSpy来跟踪我正在查看的部分。现在我决定将下拉菜单添加到我的navbar，并添加一个在hover上触发而不是点击的菜单。
我在this SO回答中使用了解决方案来实现悬停下拉菜单。但是，由于我使用的是scrollspy，因此点击li项会将我带到该部分。但是，在添加下拉列表后，单击li项目不会将我带到该部分。
此外，由于在responsive模式下禁用了悬停触发器，因此单击li项也不会打开下拉菜单。
现在无需使用scrollspy响应模式，因为菜单无论如何都会被折叠。
这是我的导航栏部分：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">
<!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
SRS Constructions
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">Founder</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Our Projects</a></li>
<li><a href="#whyus">Why Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
这是我的导航栏的css：
@media (min-width: 767px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand > img {
width: 40%;
position: relative;
display: inline-block;
height: auto;
margin-left: 90px;
margin-top: -80px;
}
#footer {
color: #2e2e2e;
}
}
@media (min-width: 767px) {
#footer {
color: #ffffff;
}
}
.navbar-brand > img {
width: 30%;
position: relative;
display: inline-block;
height: auto;
margin-left: 50px;
margin-top: -15px;
}
下拉菜单href项中的li是引发问题的项目。我想要保持rolllspy以及悬停在正常的屏幕宽度上，只悬停（这将是点击）而不是在响应模式下滚动（我不介意它是否也有效）。
请告诉我如何实现这一目标，因为两者似乎在实施方面相互矛盾。
修改
about li是我用来测试scrollspy和hover元素的那个：
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">Founder</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
我想将两种功能结合在一起。
可以查看网站here （即时编辑）