Question

Website before window is minimised. Website after window is minimised. 我有一个按预期工作的bootstrap hover下拉菜单，除非浏览器窗口最小化，菜单根本不显示。我用自己的CSS覆盖了一些样式。

任何有关我出错的帮助或指示都将不胜感激。

HTML：

＆＃13;

<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
        <div class="container" align="center">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Text</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle disabled" data-hover="dropdown" data-toggle="dropdown" href="#">Text<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Text</a></li>
                            <li><a href="#">Text</a></li>
                            <li><a href="#">Text</a></li>
                        </ul>
                    </li>
					<li class="dropdown">
                        <a class="dropdown-toggle disabled" data-hover="dropdown" data-toggle="dropdown" href="#">Text<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Text</a></li>
                        </ul>
                    </li>
					<li><a href="#">Text</a></li>
					<li><a href="#">Text</a></li>
					<li><a href="#">Text</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

＆＃13;

CSS： @import url（＆＃39; https://fonts.googleapis.com/css?family=Open+Sans＆＃39;）; .BS-示例{

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
	.bs-example{
		background-color: black !important;
		width: 100%;
		position: relative;
		position: fixed;
    }
	.navbar{
		background-color: black !important;
	}
	.nav > li > a{
		font-family: Open Sans;
		font-size: 18px;
		color: white !important;
		background-color: black;
		text-align: center;
		padding: 20px 40px;
	}
	.dropdown:hover .dropdown-menu{
		width: 100%;
		display: block;
	}
	.dropdown-menu{
		font-family: Open Sans;
		font-size: 18px;
		color: white !important;
		text-align: center;
		padding: 0px;
	}
	.dropdown a {
		color: white !important;
		background-color: black !important;
	}

＆＃13;

Answer 1

我不知道你是否导入了bootstrap.css和bootstrap.js，所以我建议你先尝试导入这两个，通常应该修复

Answer 2

我无法获得响应式下拉悬停菜单（我在某处读到Bootstrap仅限于启用菜单以便在悬停尝试合并时响应）。相反，我使用了一个菜单，用户必须在其中单击父选项卡。

.nav {
	padding-left: 3cm !important;
}

.navbar {
    font-family: Open Sans !important;
	font-size: 18px !important;
	padding: 20px 42px !important;
	color: #FF0000 !important;
	background-color: black !important;
	width: 100% !important;
	position: fixed !important;
	top: 0 !important;
	z-index: 50 !important;
	padding-bottom: 11px !important;
}

.navbar-inverse .navbar-brand{
	color: white !important;
	font-size: 22px !important;
}

.navbar-inverse .navbar-nav > li > a {
	color: white !important;
}

.dropdown-menu > li > a {
	font-family: Open Sans !important;
	font-size: 18px !important;
    display: block;
    padding: 20px 42px !important;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: white !important;
    white-space: nowrap;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
        margin-top: 2px;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: black !important;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: white !important;
	font-size: 18px !important;
    text-decoration: none;
    background-color: black !important;

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Baby Daddy</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="home.php">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pregnancy and Birth<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="supportpartner.html">Support Your Partner</a></li>
            <li><a href="labour.html">Labour</a></li>
            <li><a href="complications.html">Complications</a></li>
          </ul>
        </li>
		<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mental Health<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="postpartum.html">Postpartum Depression</a></li>
          </ul>
        </li>
        <li><a href="paternityleave.html">Paternity Leave</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="register.php"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
        <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootsrap下拉悬停菜单没有响应

2 个答案: