CSS + HTML下拉菜单重叠问题 [英] CSS + HTML dropdown menu overlapping issue
问题描述
我的下拉菜单子项与父元素重叠有问题。请检查我的小提琴以了解问题：
HTML代码：
< div id =main_category_menu>
< ul id =menu>
< li>
< a href =＃>类别< / a>
< div class =menu-container>
< h3>文字在这里< / h3>
物品数量：tralala< hr />
< ul class =menu_category>
< li class =menu_subcategory>
< a href =browse.php？id = 76>
广告（0）
< / a>
< / li>
< li class =menu_subcategory>
< a href =browse.php？id = 76>
Blalala（0）
< / a>
< / li>
< li class =menu_subcategory>
< a href =browse.php？id = 76>
超级威震天（0）
< / a>
< / li>
< / ul>
< / div>
< / li>
< / ul>
< / div>
CSS code：
#main_category_menu {
width：100％;
}
#menu ul，#menu li {
line-height：22px;
text-align：left;
font-size：14px;
}
#menu {
list-style：none;
宽度：100％;
margin：0 auto;
height：45px;
padding：5px 30px;
}
#menu li {
float：left;
display：block;
职位：亲属;
text-align：center;
padding：4px 10px;
margin：7px 30px 0 0;
border：none;
}
#menu li：hover {
border：1px solid＃b7b7b7;
border-bottom：none;
padding：4px 9px;
背景：黄色;
border-radius：5px 5px 0 0;
-moz-border-radius：5px 5px 0 0;
-webkit-border-radius：5px 5px 0 0;
z-index：10;
}
#menu li a {
font-size：14px;
颜色：＃444444;
display：block;
outline：0;
text-decoration：none;
}
#menu li：悬停{b $ b color：＃161616;
}
#menu .menu-container {
margin：0px auto;
float：left;
位置：绝对;剩余
：-999em;
text-align：left;
padding：10px 5px;
border：1px solid＃b7b7b7;
background-color：#ffffff;
border-radius：0 5px 5px 5px;
-moz-border-radius：0 5px 5px 5px;
-webkit-border-radius：0 5px 5px 5px;
}
#menu .menu-container {
width：280px;
背景：透明网址（'logo.gif'）不重复右下;
}
#menu li：hover .menu-container {
top：auto;
left：-1px;
}
#menu p，#menu h2，#menu h3，#menu ul li {
line-height：21px;
font-size：12px;
text-align：left;
}
#menu p {
line-height：18px;
margin-bottom：10px;
颜色：＃F2E8E8;
}
#menu h3，#menu h2 {
font-size：11px;
margin：7px 0 14px 0;
padding-bottom：5px;
text-transform：大写;
颜色：＃999999;
}
#menu li：hover div a {
color：＃666666;
font-size：11px;
padding-left：6px;
}
#menu li：hover div a：hover {
color：#FAFAFA;
背景：＃99DE00;
}
#menu li ul {
list-style：none;
padding：0;
margin-bottom：12px;
}
#menu li ul li {
float：none;
font-size：12px;
line-height：24px;
保证金：0;
padding：0;
职位：亲属;
text-align：left;
宽度：100％;
}
#menu li ul li：hover {
background：none;
border：中等none;
保证金：0;
padding：0;
}
我需要这样的：
结果图示例
试图添加z-index;但它不适合我。任何建议都会受到欢迎。
谢谢！ ：）
这个问题与堆栈命令有关。
<由于 li 包含 .menu-container 和 li 已经有一个堆栈上下文， .menu-container 会在其中创建一个子上下文，并且永远不会显示在其下面。您需要做的是从堆叠订单中取出 li ，然后给 .menu-container 一个负值 z-index ，它显示在它下面。但是，如果 li 的祖先不在堆栈上下文中，那么您的 .menu-container 可能会显示在页面下方内容。因此，你可能应该有一个 li 的父项，并且有一个 z-index 和相应的位置来放置堆叠顺序。
我不知道IE6 / IE7能否正常工作。
这是一个分叉的JSFiddle，用于显示更改。（ li 不再有一个 z-index 和 .menu-container 现在有一个负值 z-index ;同时父元素 ul＃menu 现在放入堆栈顺序中，以便 .menu-container 不会显示在页面内容下面）
I have a problem with dropdown menu children overlapping parent element. Please check my fiddle to understand the problem: Fiddle example
HTML code:
<div id="main_category_menu">
<ul id="menu">
<li>
<a href="#">Category</a>
<div class="menu-container">
<h3>Text goes here</h3>
Items count: tralala<hr/>
<ul class="menu_category">
<li class="menu_subcategory">
<a href="browse.php?id=76">
Advertising(0)
</a>
</li>
<li class="menu_subcategory">
<a href="browse.php?id=76">
Blalala(0)
</a>
</li>
<li class="menu_subcategory">
<a href="browse.php?id=76">
Super megatron(0)
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS code:
#main_category_menu{
width: 100%;
}
#menu ul, #menu li {
line-height:22px;
text-align:left;
font-size:14px;
}
#menu {
list-style:none;
width:100%;
margin:0 auto;
height:45px;
padding:5px 30px;
}
#menu li {
float:left;
display:block;
position:relative;
text-align:center;
padding:4px 10px;
margin:7px 30px 0 0;
border:none;
}
#menu li:hover {
border:1px solid #b7b7b7;
border-bottom: none;
padding:4px 9px;
background: yellow;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
z-index: 10;
}
#menu li a {
font-size:14px;
color: #444444;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
#menu .menu-container{
margin:0px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px;
border:1px solid #b7b7b7;
background-color: #ffffff;
border-radius:0 5px 5px 5px;
-moz-border-radius:0 5px 5px 5px;
-webkit-border-radius:0 5px 5px 5px;
}
#menu .menu-container {
width:280px;
background: transparent url('logo.gif') no-repeat right bottom;
}
#menu li:hover .menu-container{
top:auto;
left:-1px;
}
#menu p, #menu h2, #menu h3, #menu ul li {
line-height:21px;
font-size:12px;
text-align:left;
}
#menu p {
line-height:18px;
margin-bottom:10px;
color:#F2E8E8;
}
#menu h3, #menu h2 {
font-size:11px;
margin:7px 0 14px 0;
padding-bottom:5px;
text-transform:uppercase;
color: #999999;
}
#menu li:hover div a {
color: #666666;
font-size: 11px;
padding-left: 6px;
}
#menu li:hover div a:hover {
color: #FAFAFA;
background:#99DE00;
}
#menu li ul {
list-style:none;
padding:0;
margin-bottom:12px;
}
#menu li ul li {
float: none;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 100%;
}
#menu li ul li:hover {
background: none;
border: medium none;
margin: 0;
padding: 0;
}
I need this to be like: Result image example
Tried to adding z-index; but it doesn't work for my. Any suggestion would be appriciated. Thanks! :)
The issue is with stack(ing) order.
Since li contains .menu-container and li has a stacking context already, .menu-container creates a sub-context within it and can never be shown below it. What you need to do is take li out of stacking order, and then give .menu-container a negative z-index for it show up below it. However, if no ancestor of li is in a stacking context, your .menu-container may show up below the page content. Thus, you should probably have a parent of li have a z-index and accompanying position to put it in stacking order.
I am not sure if this works correctly on IE6/IE7 or not.
Here is a forked JSFiddle showing the changes. (li no longer has a z-index and .menu-container now has a negative z-index; also the parent ul#menu is now put into stacking order so that .menu-container does not show up below page content)
这篇关于CSS + HTML下拉菜单重叠问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
