Question

我正在使用wordpress 3.2.1并在wp_nav_menu上工作以获得一个自定义的“顶部导航菜单”，如下所示：

    <ul id="nav-list">
        <li><a href="">HOME</a></li>
        <li><a href="">THE ASSOCIATION</a></li>
            <ul class="sub-menu">
                <li>
                   <a>WHO WE ARE</a>
                </li>
            </ul>
        <li><a href="">CONTACTS</a></li> 
        <li><a href="">PRODUCTS</a></li>
            <ul class="sub-menu">
                <li>
                   <a>SHOES</a>
                </li>
                <li>
                   <a>UMBRELLAS</a>
                </li>
            </ul>          
   </ul>

我对菜单的css是：

#nav-list{
float:left;
margin-left:290px;
}

#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}

.sub-menu
{
float:left;
display:none;
}

ul#nav-list li:hover ul.sub-menu
{ 
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;

}

子菜单默认是隐藏的，但是它们显示在父母的悬停上。一切正常但是在父母的悬停上，子菜单绝对是用左= 0来定位的，我希望它在父按钮下面！我怎样才能做到这一点？

感谢

卢卡

Answer 1

只需将父李的位置设为亲戚; ＃nav-list li {position：relative}

我在jsfiddle上为你做了这件事，我在＃nav-list上取下了边缘左边，所以它更加清晰。

http://jsfiddle.net/jalbertbowdenii/deVYx/

Wordpress自定义导航与下拉菜单

1 个答案: