这个我一直在努力的网站让我已经把头撞到了墙上。我已经遍布整个StackOverflow和整个网络,但似乎没有人像我一样遇到同样的问题,所以我认为这可能是一个简单的解决方案,但以防万一......这里和#39;我的问题:
到目前为止,我的网站已使用Bootstrap构建,并且屏幕顶部有一个导航栏,导航中的两个链接都有下拉菜单。这些下拉菜单仅在我未从子页面(或其中一个下拉菜单中列出的页面)访问它们时显示。我用于导航栏的每个页面的代码完全相同(当然除了文件路径),这里是:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="../index.html">Southeast Helping Hands</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="../index.html">Home</a></li>
<li><a href="../community_resources.html">Community Resources</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Events <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../events.html">Events Calendar</a></li>
<li><a href="#">Community Christmas</a></li>
<li><a href="#">Food Handouts</a></li>
</ul>
</li>
<li class="dropdown"><a href="#more-info" data-toggle="dropdown" class="dropdown-toggle">More Info <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Donate</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
我已经将它与此代码隔离开了,我不相信我的CSS与它有任何关系。就此而言,只要屏幕小于某个宽度,导航链接就会被汉堡菜单按钮取代,该按钮会在点击时显示菜单,此按钮在子页面上也不起作用。
为了澄清,导航链接工作正常,但是一旦点击它们,下拉菜单就不会显示。