gpt4 book ai didi

html - 内容容器下的 CSS 下拉菜单

转载 作者:行者123 更新时间:2023-11-27 22:28:17 29 4
gpt4 key购买 nike

我尝试只用 css 制作一个下拉菜单,现在的问题是我的下拉菜单隐藏在我的内容后面。我不知道为什么它不起作用,我尝试使用 z-index 但没有任何效果。这是一个 jsfiddle 示例和一些代码。
请帮助我,谢谢。

http://jsfiddle.net/42c6q/

HTML

<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
</a>
</li>
<li class="red">
<a href="#">Home</a>
</li>
<li class="green">
<a href="#">Evenementen</a>
<ul class="submenu">
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
</ul>
</li>
<li class="blue">
<a href="#">Bus</a>

</li>
<li class="orange">
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">

</div>
</div>
</div>

CSS

.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background: url("images/kaart_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}

/* MENU */
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
overflow: hidden;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 50px;
margin-left: 30px;
width: 130px;
text-align: center;
margin-top: 40px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 15pt;
}
#main_menu .logo{
background: none;
width: 224px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }

/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
}

最佳答案

在你的 #main_menu 你有这个 overflow:hidden 删除那个:

#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
/*overflow: hidden; Remove this*/
z-index: 2;
}

演示 http://jsfiddle.net/42c6q/2/

关于html - 内容容器下的 CSS 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20906553/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com