css - 在 WordPress 21 中制作下拉菜单下推内容

Question

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

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

我会感谢精通 WordPress 的人的建议！

Answer 1

我在网站上查看，我从头开始创建示例菜单。
我希望它对你有帮助。
这是一个小提琴。
这是一些 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
    }

顶级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;