html - 我怎样才能让我的导航下拉菜单出现在我的横幅前面？

标签 html css navigationbar

我需要我的导航栏下拉菜单覆盖我的横幅顶部。此刻他们出现在它的背后。我试着摆弄定位，但我能得到我想要的结果。有人可以帮助我吗？

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]--> 
<title>Title of the document</title>
</head>

<body>
<div id="container">
<header>
<div id="logo"><img src="css/images/Devtestlogotp.png" width="50%" height="50%"></div>
<nav>
<ul id="menu-bar">
<li><a href="#">LINK1</a>
  <ul>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
  </ul>
 </li>
 <li><a href="#">LINK2</a></li>
 <li><a href="#">LINK3</a></li>
 <li><a href="#">LINK4</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="banner"></div>
<section id="sect1">
<div id="sect1_row1"><div class="float_lbig"><div class="col_1"><img src="css/images/DevTestpullout1.jpg" width="125px" height="96px"/></div><div class="col_2"><img src="css/images/DevTestpullout2.jpg" width="125px" height="96px"/></div></div><div class="float_rsmall"><img class="original" src="css/images/DevTestpullouthov.jpg" width="125px" height="96px"/>
</div></div>
<div id="sect1_row2"><div class="float_l"><div class="col_3"><img src="css/images/DevTestbuttimage1.jpg" alt="" width="50%" height="50%"></div><div class="col_4"><a href="#"><img src="css/images/DevTestbuttimage1.jpg" alt="" width="50%" height="50%"></a></div></div><div class="float_r"><div class="col_5"><a href="#"><img src="css/images/DevTestbuttimage2.jpg" alt="" width="50%" height="50%"></a></div><div class="col_6"><a href="#"><img src="css/images/DevTestbuttimage3.jpg" alt=""  width="50%" height="50%"></a></div></div></div>

</section>
<section id="sect2"><form id="form1">
 <input type="text" name="name" size="45" placeholder="Your name:*" required>  <input type="email" name="email" size="45" placeholder="Your email:*" required><br>
 <input type="text" name="phone" size="45" placeholder="Phone number:"> <input type="date" name="dob" size="45" placeholder="Date of birth:"><br>
 <textarea name="comments" placeholder="Additional comments:"></textarea><br>
<input type="submit" value="send">
</form></section>
<div id="footer_links"><div class="float_l"><div class="col_3">Quicklinks 1<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div><div class="col_2">Quicklinks 2<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div></div><div class="float_r"><div class="col_3">Quicklinks 3<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div><div class="col_2">Contact Us<br><a href="#">(02) 1282 2827</a><br><a href="#">hello@email.com.au</a><br><a href="#">22-36 Mountain Street Ultimo 2007</a></div></div></div>
<footer><div class="float_l">clickersonline 2016 | Privacy Policy</div><div class="float_r"></div></footer>
</div>
</body>

</html>

CSS:

body {
    background-color: #ecf3f9;
}

* {
    box-sizing: border-box;
}

#container {
    margin:auto;
    height:auto;
    width: 70%;
    max-width:700px;
    min-width:300px;
    overflow: hidden;
}

header {
    background-color:#EDEDED;
    width:100%;
    height: 25%;
    overflow:hidden;
}

#logo {
    float:left;
    width: 40%;
    height: 25%;
    overflow: hidden;
    padding: 10px 0 0 15px;
}

nav{
    float:right;
    width: 60%;
    height: 25%;
    overflow: hidden;
    margin-top: 10px;
}

#menu-bar {
  width: 95%;
  margin-top: 10px;
  padding: 0px 5px 0px 0px;
  height: 20%;
  line-height: 100%;
  background: #EDEDED;
  border: solid 0px #EDEDED;
  position:relative;
  z-index:999;
}

#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 4px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: Verdana;
  font-style: normal;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 7px 7px 7px 7px;
  margin: 0;
  margin-bottom: 6px;
}

#menu-bar li ul li a {
  margin: 0;
}

#menu-bar .active a, #menu-bar li:hover > a {
  border-bottom: 1px solid #0399D4 ;
  color: #000000;

}

#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
}

#menu-bar ul a:hover {
  background: #0399D4 !important;
  color: #000000 !important;
}

#menu-bar li:hover > ul {
  display: block;
}

#menu-bar ul {
  background: #FFFFFF;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 33px;
  left: 0;
  border: solid 0px #EDEDED;
}

#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}

#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#000000 !important;
  font-size:12px;
  font-style:normal;
  font-family:Verdana;
  font-weight: normal;
}

#menu-bar ul li:first-child > a {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
}

#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

footer {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    overflow: hidden;
}

#footer_links {
    width: 100%;
    height:auto;
    background-color: #9d9d9d;
    overflow: hidden;
}

#banner {
    height: 50%;
    width: 100%;
    background-image:url(images/DevTestBanner.jpg);
    overflow: hidden;
    min-height: 200px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#sect1 {
    background-color: #ffffff;
    width: 100%;
    height: 25%;
    overflow: hidden;
}

#sect2 {
    background-color: #ededed;
    width: 100%;
    height: 25%;
    overflow: hidden;
}


.float_l {
    float: left;
    width: 50%;
    overflow: hidden;
    padding: 0px 0px 30px 45px;
}

.float_lbig {
    float: left;
    width: 70%;
    overflow: hidden;
    padding: 30px 0px 30px 45px;
}

.float_r {
    float: right;
    width: 50%;
    overflow: hidden;
    padding: 0px 0px 30px 70px;
}

.float_rsmall {
    float: right;
    width: 30%;
    overflow: hidden;
    padding: 30px 0px 30px 30px;
}

.col_3 {
    width: 50%;
    height:50%;
    float:left;
    overflow: hidden;

}

.col_1 {
    width: 50%;
    float: right;
    height: 50%;
}

.col_2 {
    width: 50%;
    float: left;
    height: 50%;
}

.col_4 {
    width: 50%;
    float: right;
    height: 50%;
}

.col_6 {
    width: 50%;
    float: right;
    height: 50%;

}

.col_5 {
    width: 50%;
    float: left;
    height: 50%;

}

#sect1_row1 {
    width:100%;
    height:50%;
}

#sect1_row2 {
    width:100%;
    height:50%;
}

#form1 {
    padding:40px;
}

textarea {
width: 590px;
height:150px;
}

最佳答案

问题是您的菜单位于 header 和 div 中，两者都显示 overflow: hidden。尽量不要设置 overflow 或将其设置为“visible”。如果这会破坏您的 header，请将其设置为 display: inline-block。

body {
    background-color: #ecf3f9;
}

* {
    box-sizing: border-box;
}

#container {
    margin:auto;
    height:auto;
    width: 70%;
    max-width:700px;
    min-width:300px;
    overflow: hidden;
}

header {
    background-color:#EDEDED;
    width:100%;
    height: 25%;
    /*overflow:hidden;*/
    display: inline-block;
}

#logo {
    float:left;
    width: 40%;
    height: 25%;
    /*overflow: hidden;*/
    padding: 10px 0 0 15px;
}

nav{
    float:right;
    width: 60%;
    height: 25%;
    /*overflow: hidden;*/
    margin-top: 10px;
}

#menu-bar {
  width: 95%;
  margin-top: 10px;
  padding: 0px 5px 0px 0px;
  height: 20%;
  line-height: 100%;
  background: #EDEDED;
  border: solid 0px #EDEDED;
  position:relative;
  z-index:999;
}

#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 4px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: Verdana;
  font-style: normal;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 7px 7px 7px 7px;
  margin: 0;
  margin-bottom: 6px;
}

#menu-bar li ul li a {
  margin: 0;
}

#menu-bar .active a, #menu-bar li:hover > a {
  border-bottom: 1px solid #0399D4 ;
  color: #000000;

}

#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
}

#menu-bar ul a:hover {
  background: #0399D4 !important;
  color: #000000 !important;
}

#menu-bar li:hover > ul {
  display: block;
}

#menu-bar ul {
  background: #FFFFFF;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 33px;
  left: 0;
  border: solid 0px #EDEDED;
}

#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}

#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#000000 !important;
  font-size:12px;
  font-style:normal;
  font-family:Verdana;
  font-weight: normal;
}

#menu-bar ul li:first-child > a {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
}

#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

footer {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    overflow: hidden;
}

#footer_links {
    width: 100%;
    height:auto;
    background-color: #9d9d9d;
    overflow: hidden;
}

#banner {
    height: 50%;
    width: 100%;
    background-image:url(images/DevTestBanner.jpg);
    overflow: hidden;
    min-height: 200px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#sect1 {
    background-color: #ffffff;
    width: 100%;
    height: 25%;
    overflow: hidden;
}

#sect2 {
    background-color: #ededed;
    width: 100%;
    height: 25%;
    overflow: hidden;
}


.float_l {
    float: left;
    width: 50%;
    overflow: hidden;
    padding: 0px 0px 30px 45px;
}

.float_lbig {
    float: left;
    width: 70%;
    overflow: hidden;
    padding: 30px 0px 30px 45px;
}

.float_r {
    float: right;
    width: 50%;
    overflow: hidden;
    padding: 0px 0px 30px 70px;
}

.float_rsmall {
    float: right;
    width: 30%;
    overflow: hidden;
    padding: 30px 0px 30px 30px;
}

.col_3 {
    width: 50%;
    height:50%;
    float:left;
    overflow: hidden;

}

.col_1 {
    width: 50%;
    float: right;
    height: 50%;
}

.col_2 {
    width: 50%;
    float: left;
    height: 50%;
}

.col_4 {
    width: 50%;
    float: right;
    height: 50%;
}

.col_6 {
    width: 50%;
    float: right;
    height: 50%;

}

.col_5 {
    width: 50%;
    float: left;
    height: 50%;

}

#sect1_row1 {
    width:100%;
    height:50%;
}

#sect1_row2 {
    width:100%;
    height:50%;
}

#form1 {
    padding:40px;
}

textarea {
width: 590px;
height:150px;
}
<div id="container">
<header>
<div id="logo"><img src="css/images/Devtestlogotp.png" width="50%" height="50%"></div>
<nav>
<ul id="menu-bar">
<li><a href="#">LINK1</a>
  <ul>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
   <li><a href="#">DROP DOWN MENU</a></li>
  </ul>
 </li>
 <li><a href="#">LINK2</a></li>
 <li><a href="#">LINK3</a></li>
 <li><a href="#">LINK4</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="banner"></div>
<section id="sect1">
<div id="sect1_row1"><div class="float_lbig"><div class="col_1"><img src="css/images/DevTestpullout1.jpg" width="125px" height="96px"/></div><div class="col_2"><img src="css/images/DevTestpullout2.jpg" width="125px" height="96px"/></div></div><div class="float_rsmall"><img class="original" src="css/images/DevTestpullouthov.jpg" width="125px" height="96px"/>
</div></div>
<div id="sect1_row2"><div class="float_l"><div class="col_3"><img src="css/images/DevTestbuttimage1.jpg" alt="" width="50%" height="50%"></div><div class="col_4"><a href="#"><img src="css/images/DevTestbuttimage1.jpg" alt="" width="50%" height="50%"></a></div></div><div class="float_r"><div class="col_5"><a href="#"><img src="css/images/DevTestbuttimage2.jpg" alt="" width="50%" height="50%"></a></div><div class="col_6"><a href="#"><img src="css/images/DevTestbuttimage3.jpg" alt=""  width="50%" height="50%"></a></div></div></div>

</section>
<section id="sect2"><form id="form1">
 <input type="text" name="name" size="45" placeholder="Your name:*" required>  <input type="email" name="email" size="45" placeholder="Your email:*" required><br>
 <input type="text" name="phone" size="45" placeholder="Phone number:"> <input type="date" name="dob" size="45" placeholder="Date of birth:"><br>
 <textarea name="comments" placeholder="Additional comments:"></textarea><br>
<input type="submit" value="send">
</form></section>
<div id="footer_links"><div class="float_l"><div class="col_3">Quicklinks 1<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div><div class="col_2">Quicklinks 2<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div></div><div class="float_r"><div class="col_3">Quicklinks 3<br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a><br><a href="#">link text here</a></div><div class="col_2">Contact Us<br><a href="#">(02) 1282 2827</a><br><a href="#">hello@email.com.au</a><br><a href="#">22-36 Mountain Street Ultimo 2007</a></div></div></div>
<footer><div class="float_l">clickersonline 2016 | Privacy Policy</div><div class="float_r"></div></footer>
</div>

关于html - 我怎样才能让我的导航下拉菜单出现在我的横幅前面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36026901/

上一篇：jquery - 拖放不完全落在位置相对可放置的 div 内

下一篇：css - 删除标题元素周围的多余空间

相关文章：

ios - NavigationBar 按钮单击区域无法正常工作(图像不可单击)

javascript - 在 CSS 中为类和 ID 应用范围

Javascript 隐藏 div 并显示另一个带有简单倒计时的 div

javascript - UL 标签的自动菜单？

html - 以特殊样式用文字包裹图像

jquery - 使用向上/向下箭头选择 div

jquery - 将类添加到子元素的父 li 处于事件状态

html - Bootstrap Navbar 高度作为 Logo

html - 选中复选框后，重定向到文本框

javascript - 菜单导航栏网页: dynamic menu windows.画面

©2024 IT工具网  联系我们