Question

我不确定为什么我的悬停效果不能在我的导航栏上工作，我想知道是否有人可以指出我出错的地方？我添加了所有必要的信息，但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类吗？

Answer 1

您需要确保在html文件中导入jquery和bootstrap.min.js以使下拉列表生效。由于bootstrap下拉列表是基于javascript的组件。

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

我的网站导航栏悬停不适用于移动网站。

1 个答案: