我的网站的导航栏悬停在移动网站上不起作用。

我不确定为什么我的悬停效果在我的导航栏上不起作用，我想知道是否有人能指出我出错的地方？我添加了所有必要的信息，但bootstrap无法正常工作。我的网站的导航栏悬停在移动网站上不起作用。

这是我的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类吗？

来源

2017-08-26 farith firdous

您需要确保jquery和bootstrap.min.js被导入到您的html文件中以使下拉工作。由于引导下拉是基于JavaScript的组件。

<script src="/js/jquery.min.js"></script> 
<script src="/js/bootstrap.min.js"></script>

来源

2017-08-26 06:32:18

我的网站的导航栏悬停在移动网站上不起作用。

回答

相关问题