Question

当我悬停在我的菜单上时，我的菜单和子菜单出现问题时，子菜单在悬停时不会对齐，它会浮动在左侧，然后显示在第一个菜单的底部，所以当我选择最后一个菜单时不能选择它。这是参考图片。

HTML（WORDPRESS）

<section class="twelve columns clearfix" style="background:transparent">
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</section>

CSS：

.menu {
    width:auto;
    float:left;
    display:block;
}

.children {
    display:none;
}

#navcontainer {
    display:inline;
    padding:0px;
    margin: 0px; /*-8px 0 0 10px;*/
    list-style:none;
    position:relative;
    z-index:1;
    float:left;
    height: 20px;
}

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
}

#navcontainer ul li { 
    display: block;
    float: left;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #b37032;
    background-color: #dbd2c1;
    width: 100%;
}

#navcontainer ul li ul li{
    display:block;
    width:auto;
    float: none;
    background:#edebd7;
}

#navcontainer ul li ul li a {
    background: transparent !important;
    color: #724e32;
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;;
    -moz-border-radius: 0 0 0 0 !important;;
    -webkit-border-radius: 0 0 0 0 !important;;
    border-radius: 0 0 0 0 !important;;
    background-color: transparent !important;;
    opacity: 1 !important;; 
}

#navcontainer li:hover ul{

display:block;

}

#navcontainer ul li:hover a {
    color: #724e32;
    border-top: 1px solid #694b0a;
    border-left: 1px solid #694b0a;
    border-right: 1px solid #694b0a;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background-color: #edebd7;
    opacity: 0.5;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #d3c096;
}


#navcontainer li:hover ul.children { 
    left:0; 
    top:18px; 
    background:#edebd7; 
    color:#724e32; 
    padding:5px; 
    position:absolute;
    border-left:1px solid #694b0a; 
    border-right:1px solid #694b0a; 
    border-bottom:1px solid #694b0a; 
    white-space:nowrap; 
    width:160px; 
    height:auto; 
    z-index:300; 
    -moz-border-radius:0 0 5px 5px; 
    -webkit-border-radius:0 0 5px 5px; 
    border-radius:0 0 5px 5px;

}

#navcontainer ul li ul li:hover {
    color: #fff;
    background-color: #d3c096;
}

#navcontainer ul li ul li a:hover {
    color: #fff;
    background-color: #d3c096;
}

#navcontainer ul li ul li:hover a{
    color: #fff;
    background-color: transparent;
}

Answer 1

在你的css文件中替换这个类，一切都应该没问题：

#navcontainer li:hover ul.children { 
    top:18px; 
    background:#edebd7; 
    color:#724e32; 
    padding:5px; 
    position:absolute;
    border-left:1px solid #694b0a; 
    border-right:1px solid #694b0a; 
    border-bottom:1px solid #694b0a; 
    white-space:nowrap; 
    width:160px; 
    height:auto; 
    z-index:300; 
    -moz-border-radius:0 0 5px 5px; 
    -webkit-border-radius:0 0 5px 5px; 
    border-radius:0 0 5px 5px;

}

左边：0是适当的问题。别的什么：）

悬停时子菜单不会与菜单对齐

1 个答案: