Question

我想修改WordPress Twenty Twelve主题的CSS，以便下拉子菜单链接将其余内容按下来。

我假设，我必须在子菜单中删除CSS中的position:absolute;，但是，出于某种原因，当我这样做时，子菜单仍然覆盖它下面的div，而不是将其推下来。

我很欣赏来自WordPress精明的人的建议！

Answer 1

我在网站上查了一下，然后从头开始创建样本菜单我希望它会对你有所帮助。
这是一个fiddle 这是一些HTML（我省略了<a>标签，因此它更具可读性。

<div id="wrapper">
<ul id="nav">
    <li>link1
        <ul class="sub">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </li>
    <li>link2
        <ul class="sub">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </li>
    <li>link3
        <ul class="sub">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </li>
</ul>
<div class="clear"></div>
</div>

这是css：

body
{
margin:0;
}
#wrapper
{
    background:#ccc;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
#nav > li
{
    float:left;
}
#nav > li:hover .sub
{
    display:block;
}
.sub
{
    display:none;
}
.clear
{
clear:both;
}

我认为你应该能够根据自己的需要对其进行修改。

这是一步一步的指南，但请记住，您需要做更多的工作才能达到您想要的效果。这些是一些基本步骤。导航：

.main-navigation {
    float: right; <- remove this line
    }

top ul：

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: inline-block !important;<- remove this line
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: none;<- remove this line
}
li:
.main-navigation li a, .main-navigation li {
    display: inline-block;<- remove this line  
}


.main-navigation li ul {
    display: none;
    position: absolute;<- remove this line
    top: 100%;
}

ul.nav-menu > li {<- add this rule
    float: left;
}

html中的一些变化：

<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu">
...
</ul>
<div class="clear"></div> <- add this line and the folowing rule in the css
</div>

.clear
{
clear:both;
}

从旧版本创建备份，并尝试一下。

Answer 2

尝试使用position : relative;代替position : absolute;

使用下拉菜单在WordPress二十二中推送内容

2 个答案: