Html 下拉菜单截断或出现在 div 后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12444958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop down menu cuts off or appears behind div
提问by user1278496
I have a drop down menu which is appearing behind my image transition gallery div. Below is the image of what it looks like and the HTML and CSS for it.
我有一个下拉菜单，它出现在我的图像转换库 div 后面。下面是它的外观图像以及它的 HTML 和 CSS。
HTML:
HTML：
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Packages </a>
<li><a href = "#" > Weddings </a>
<li><a href = "#" id="left" > Lifestyle </a>
<ul class = "submenu" >
<li> <a href = "#" > Families </a> </li>
<li> <a href = "#"> Newborn/Child </a> </li>
<li> <a href = "#" > Portraits </a> </li>
</ul>
</li>
<li> <a href = "#" > Blog </a> </li>
<li><a href = "#" id="left"> Abous Us </a>
<ul class = "submenu" >
<li> <a href = "#" > Ed Osborne </a> </li>
<li> <a href = "#" > Testimonials </a> </li>
<li> <a href = "#" > FAQs </a> </li>
</ul>
</li>
<li> <a href = "#" > Contact Us </a> </li>
<li> <a href = "#" > Links </a> </li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="smart-gallery">
<a href="images/cubagallery-img-1.jpg">
<img src="images/cubagallery-img-1.jpg" /></a>
<a href="images/cubagallery-img-15.jpg">
<img src="images/cubagallery-img-15.jpg" /></a>
<a href="images/cubagallery-img-3.jpg">
<img src="images/cubagallery-img-3.jpg" /></a>
<a href="images/cubagallery-img-4.jpg"></a>
<img src="images/cubagallery-img-4.jpg" /></a>
</div>
</div>
CSS:
CSS：
.min-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px;
}
.min-gallery .preview
{
width: 852px;
height: 493px;
margin-top: 36px;
margin-left: 36px;
margin-right: 36px;
position: relative;
border: solid 2px black;
overflow: hidden;
background-color: White;
}
.min-gallery .preview img
{
/* width: 795px; height: 525px;*/
position: absolute;
}
.min-gallery .bottom
{
width: 100%;
height: 98px;
color: Gray;
font-family: Arial;
font-size: 1em;
font-weight: bold;
overflow: hidden;
}
#top_bar {
width: 100%;
height: 145px;
background: #000000;
padding-bottom: 20px;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 100px;
}
ul.menu {
list-style: none;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
position: relative;
}
ul.menu li a{
padding: 10px 18px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a#left{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover {
background: url(../images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 11px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {
background-position: center bottom; cursor: pointer;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 122px;
padding-left: 30px;
text-align: left;
}
When I remove position:absolute from .min-gallery .preview img, the drop down menu appears on top which is how I want it but the images do stop changing and just stick on one image.
当我从 .min-gallery .preview img 中删除 position:absolute 时，下拉菜单出现在顶部，这就是我想要的方式，但图像确实停止更改并只粘贴在一张图像上。
Anyone got a quick fix? Sorry about the pasting of all the code but I dont know how else I can express my point to you guys
有人有快速修复吗？很抱歉粘贴所有代码，但我不知道我还能如何向你们表达我的观点
Thanks
谢谢
回答by NullPoiиteя
set the higher z-index of drop down menu .
设置更高的下拉菜单 z-index 。
.submenu { z-index: 999; }
reason "An element with greater stack order is always in front of an element with a lower stack order."
原因“具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。”
回答by Mark
Use a z-index for your drop down menu.
为您的下拉菜单使用 z-index。
.submenu { z-index: 1; }
Also, as a side note, if you are using prefixed properties you should also use the spec property as well which should appear last after the vendor specific prefixes. Example:
此外，作为旁注，如果您使用前缀属性，您还应该使用 spec 属性，该属性应该出现在供应商特定前缀之后的最后。例子：
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
When a vendor supports the standard property, you don't have to change your code.
当供应商支持标准属性时，您不必更改代码。
回答by Nabeel khan
Use
用
.submenu { z-index: 1;position :relative}
.submenu { z-index: 1;position :relative}
回答by sg28
Find the overflow property in the parent or in the child element and remove the overflow property.
在父元素或子元素中查找溢出属性并删除溢出属性。
You are welcome
不客气
