我目前正在创建我的第一个 wordpress 主题,但我在使用水平下拉菜单时遇到了问题。悬停时,下拉菜单出现在内容下方。
http://pennyjarrdesigns.com/assets/problem1.jpg (截图)
我试过使用 z-index 并调整相对和绝对定位,但似乎没有任何效果。将 absolute 添加到导航周围的主 div 会产生以下结果:
http://pennyjarrdesigns.com/assets/problem2.jpg (截图)
下拉菜单现在可见,但它破坏了布局。
这是 html/php:
<div class="container">
<div class="row">
<div class="twelvecol last" id="nav">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
</div>
</div>
CSS:
#nav{background: #4b4261;
margin-bottom: 2%;
color: #f4e1c8;
}
.nav{
width:100%;
background: #4b4261;
display:block;
float:left;
position:relative;
}
.nav ul{
list-style:none;
}
.nav li{
display:inline-block;
position:relative;
}
.nav a{
display:block;
text-decoration:none;
color:#f4e1c8;
padding:0 15px 10px 0;
font-size: 1.2em;
font-weight:bold;
}
.nav ul ul{
display:none;
position: absolute;
left:0;
top: 100%;
float:left;
z-index:99999;
background: #c1c5cc;
}
.nav ul ul ul{
top: 30%;
left:100%;
background: #dfe1e8;
}
.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}
.nav li:hover > a,.nav ul ul:hover > a{
color:#fff;
}
.nav ul li:hover > ul{
display:block;
}
网格样式:
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
我真的觉得我在这里忽略了一些简单的事情。有任何想法吗?谢谢!
最佳答案
.row
的溢出是隐藏的,这意味着任何超出该元素边界的内容都不会显示。
此外,当您将子元素 ul 设置为 position: absolute;
和 z-index: 9999;
时,它们的父元素设置为 position :relative;
没有将 z-index 设置为高于 content
元素。因此,下拉 z-index 仅适用于其父“维度”(z-index 级别),而不适用于页面的其余部分。这可能会导致问题,但我还没有测试过,只是凭内存工作。
关于css - 属于内容 CSS 的水平链接下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14568823/