css - 使下拉菜单在 WordPress 二十十二中向下推送内容

Question

我想修改 WordPress Twenty Twelve 主题的 CSS，使下拉子菜单链接将其余内容向下推。

我假设，我必须在子菜单 ul li 的 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
    }

顶部:

.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;
}

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