Css 使下拉菜单在WordPress中向下推内容

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

我假设，我必须删除

位置：绝对
我非常感谢精通WordPress的人的建议
 尝试
位置：相对而不是
位置：绝对
我在网站上查看过，我从头开始创建了示例菜单。

我希望这将对您有所帮助。

这是一个。

下面是一些HTML（我省略了
标记，因此它更具可读性

<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>

我认为你应该能够根据自己的需要修改这个


这是一个循序渐进的指南，但是请记住，为了达到你想要的结果，你需要做更多的工作。
对于导航：

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

。主导航{
浮动：对；ul{
显示：内联块！重要；ul{
显示：无；发布代码或简化的pleasecode，或网站链接会很有帮助。@Adrift–网站链接会起作用吗？（我不太擅长JSFIDLE，而且有太多代码要发布。）那太好了。.当然-不过有一件事-当你说“向下推内容”时你的意思是菜单下面的主图像吗？谢谢你的演示，这是我想要达到的效果-但是你能告诉我（这是我最初的问题）-我如何在2012 WordPress主题中为菜单重新创建相同的效果？提前谢谢你！你可以使用相同的代码（有类比），但从212 WordPress主题中，您必须删除
定位
、
浮动
和
显示：内联块
以及类似的内容。之后，您的网站将看起来有点不同，因此您必须修改网站中的其他样式。在关闭
me之前，不要忘记添加
nu main menu container
div，因为这是使其工作的关键因素之一。另外，您的
nav
。主导航
有
float:right
，这也必须删除。还有一条建议，如果您在进行更改之前备份css，您会发现它很有用。-您能更详细一点吗？我很抱歉我已经试着按照你的建议做了大约一个小时了，但我不知道如何将它应用到更复杂的css结构的“212”菜单中。我会在几分钟内添加一些css。你能再给我一次链接吗？
.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;
}

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