0
ドロップダウンメニューに隠れ：見出しは、私が書かれているWebページの手を作成するには、次のコードをしようとしています
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>私はブートストラップのフレームワークを使用していますし、ページ内のメニューボタンを作成していますブラウザの幅を小さくすると表示されます。問題は、そのボタンを押すと、ドロップダウンメニューが表示され、見出し（Our Menu）が隠れてしまうことです。私がしたいのは、見出し（私たちのメニュー）で、その下のコンテンツは、ドロップダウンメニューを開いたときに下に移動し、ドロップダウンメニューを閉じると元の位置に戻るように移動します。これをどのように達成するのですか？また、メニューの背景色を変更するにはどうしたらいいですか？私はこれを試みたが、うまくいきませんでした：
.navbar-nav > li > .dropdown-menu {
background-color: #e7e7e7;
}
おかげで、それをワットを
margin-top: 0px;を追加する必要が縦に拡大しますorks！それは簡単だったことを知らなかった:) –