0
我想創建一個網頁，手都寫了下面的代碼隱藏：標題後面的下拉菜單中
body {
font-size: 16px;
color: #fff;
background-color: #4203A1;
font-family: 'Roboto', sans-serif;
}
#header-nav {
background-color: #8605E9;
border-radius: 0;
border: 3px solid black;
}
.navbar-brand h1 {
font-size: 1.5em;
margin-top: -8px;
margin-bottom: 2px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.5;
text-align: left;
}
.navbar-default .navbar-brand {
color: #fff;
}
.dropdown-menu {
width: 100%;
text-align: center;
margin-top: 53px;
border: 1px solid black
}
.dropdown button {
background-color: #fff;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -42px;
}
.heading {
/*position: relative;*/
}
#menu-sections section {
border: 3px solid black;
margin: 20px;
background-color: #607353;
}
.col-xs-12 p {
padding: 10px;
text-align: left;
}
.col-xs-12 h3 {
color: #000000;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.js"></script>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand navbar-left">
<h1> Food, LLC </h1>
</div>
<div class="dropdown">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu hidden-sm hidden-lg hidden-md" role="menu" aria-labelledby="menu1" id="collapsable-nav">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chicken</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Beef</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sushi</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div id="heading" class="container text-center">
<h2> Our Menu </h2>
</div>
<div id ="menu-sections" class="container">
<div class="col-xs-12 text-center">
<section><h3> Chicken </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section></div>
<div class="col-xs-12 text-center">
<section><h3> Beef </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section>
</div>
<div class="col-xs-12 text-center">
<section><h3> Sushi </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section>
</div>
</body>我使用的引導框架，並已創建的頁面的按鈕，在瀏覽器寬度減小時可見。問題是當我按下該按鈕時，會出現下拉菜單，標題（我們的菜單）隱藏在它後面。我想要做的是標題（我們的菜單），當我打開下拉菜單並在關閉下拉菜單時向上移回原始位置時，下面的內容應向下移動。我該如何做到這一點？另外，如何更改菜單的背景顏色？我試過，但沒有奏效：
.navbar-nav > li > .dropdown-menu {
background-color: #e7e7e7;
}
感謝它w獸人！不知道那是簡單的:) –