标题后面的下拉菜单中

我想创建一个网页，手都写了下面的代码隐藏：标题后面的下拉菜单中

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; 
}

来源

2016-11-27 Maryam Masood

你只需要从absolute更改类.dropdown菜单的位置relative

.dropdown-menu { 
    position: relative; 
}

如果你不想您的导航栏在显示下拉菜单时垂直展开，那么您应该将margin-top: 0px;添加到同一类别

.dropdown-menu { 
    position: relative; 
    margin-top: 0px; 
}

来源

2016-11-27 09:16:48 Chiller

感谢它w兽人！不知道那是简单的:) –

标题后面的下拉菜单中

回答

相关问题