我不确定为什么我的悬停效果在我的导航栏上不起作用，我想知道是否有人可以指出我哪里出错了？我已经添加了所有必要的信息，但引导程序无法正常工作。
这是我的 html 和 css：
<div class="col-sm-12 col-xs-12" >
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid " >
<div class="navbar-header">
!---- mobile site--->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2" >
<ul class="nav navbar-nav text-center" style="margin-left: 170px;">
<li class="dropdown">
<a href="private-office.html"style="color:white;" >Private Office</a>
<ul class="dropdown-menu" style="text-transform: capitalize;">
<li><a href="Serviced.html">Serviced Office</a></li>
<li>
<a href="Instant.html">Instant Office</a></li>
<li><a href="Customized.html">Customized Office Space</a></li>
</ul>
</li>
<li class="dropdown">
<a href="co-working.html"style="color:white;margin-left: 34px;">Coworking Space</a>
<ul class="dropdown-menu" style="text-transform: capitalize;">
<li><a href="introCow.html">Introduction</a></li>
<li><a href="Coworking-reserved.html">Coworking Space Reserved</a></li>
<li><a href="Coworking-unreserved.html">Coworking Space Unreserved</a></li>
<li><a href="SharedOfficeEnv.html">Shared Office Environment</a></li>
<li><a href="Pricing.html">Pricing</a></li>
</ul>
</li>
<li class="dropdown">
<a href="virtual-office.html"style="color:white;margin-left: 34px;">Virtual Office</a>
<ul class="dropdown-menu" style="text-transform: capitalize;">
<li><a href="introVir.html">Introduction</a></li>
<li><a href="VirtualOfficeBasic.html">Virtual Office Basic</a></li>
<li><a href="VirtualOfficePlus.html">Virtual Office Plus</a></li>
<li><a href="VirtualOfficePro.html">Virtual Office Pro</a></li>
<li><a href="VirtualOfficeUltimate.html">Virtual Office Ultimate</a></li>
<li><a href="VirtualOfficePackages.html">Virtual Office Packages</a></li>
</ul>
</li>
<li><a href="conference-room.html"style="color:white;margin-left: 34px;">Conference Room</a></li>
<li class="dropdown">
<a href="startup.html"style="color:white;margin-left:34px;">Solutions</a>
<ul class="dropdown-menu" style="text-transform: capitalize;">
<li><a href="Startups.html">Startups</a></li>
<li><a href="Small.html">Small/Medium Business</a></li>
<li><a href="Enterprise.html">Enterprise Business</a></li>
</ul>
</li>
<li><a href="membership.html"style="color:white;margin-left: 34px;">Membership</a></li>
</ul>
</div>
</div>
</nav>
</div>
我需要为此放置单独的 CSS 类吗？
您需要确保将jquery和bootstrap.min.js导入到html文件中以使下拉列表正常工作。由于引导下拉列表是基于javascript的组件。
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>