Bootstrap Navbar折叠下拉菜单

Question

I am working on a Bootstrap Website with a dropdown box in the Navbar. 我正在使用Navbar中的下拉框在Bootstrap网站上工作。 When the Navbar is in collapse mode. 当Navbar处于折叠模式时。 The dropdown menu is not responding Does anyone know why this would happen 下拉菜单没有响应有谁知道为什么会这样

The website can be found at http://horizonarb.co.uk/index.html 该网站可在http://horizonarb.co.uk/index.html找到

The code is as follows; 代码如下;

Many thanks! 非常感谢！

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Horizon Arboriculture</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <script src="js/googleFonts.js" type="text/javascript"></script>

    <link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>

     <!-- Custom CSS -->
    <link href="css/custom.css" rel="stylesheet"></link>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

     <div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">

        <div class="container">

            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <small>MENU</small>
                </button>

             <a href=""><img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize"></a>

            </div> <!-- class="navbar-header" -->

            <div class="collapse navbar-collapse">

                <ul class="nav nav-pills navbar-right">

                    <li class="active"><a href="index.html">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Crown Thinning</a></li>
                          <li><a href="#">Crown Lifting</a></li>
                          <li><a href="#">Crown Reduction</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.php">Contact</a></li>

                </ul>

            </div> <!-- class="collapse navbar-collapse" -->

        </div> <!-- class="container" -->

      </div> <!--  class="navbar navbar-default" -->    



      <div class="container" id="topContainer">

        <div class="row">

            <div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">

                <img src="img/front/HorizonArb_Transparent.png" width="70%">


            </div>







    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

The dropdown is opening and closing, but it's hidden from view by the container. 下拉列表是打开和关闭，但它被容器隐藏起来。 The following CSS should fix that: 以下CSS应该解决这个问题：

.navbar-static-top .navbar-collapse.in {
    overflow-y: visible; /* Bootstrap default is "auto" */
}

Bootstrap Navbar折叠下拉菜单

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-12-04 16:27:56

Bootstrap Navbar折叠下拉菜单

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-12-04 16:27:56

解决方案1
3 已采纳 2015-12-04 16:27:56