我正在把一个网站从HTML/CSS翻译成Wordpress，我遇到了一个问题。本着从仪表板上完全定制网站的精神，我一直在使用Wordpress的默认菜单系统来创建导航，但我无法让它像硬编码HTML那样。我需要将父列表项（父的a元素）移动到其子ul下面，如下所示：

<li id="generalinfo">
    <ul>
        <li><a href="#">About the Festival</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <a class="cat" href="#">General Info</a>
</li>

但默认情况下，Wordpress会强制它这样做：

<li id="generalinfo">
    <a class="cat" href="#">General Info</a>
    <ul>
        <li><a href="#">About the Festival</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</li>

对于设计而言，链接位于无序列表之后是至关重要的，因为它将是一个向下的横幅，如下所示：

http://i.imgur.com/oFRJdl7.png

图形元素是具有悬停状态的背景元素。这是他们看起来像是下拉的，左边的主页按钮就是横幅完全升起的一个例子。这就是为什么在末尾显示父链接元素很重要的原因。

想法？

#generalinfo{
  display: flex;
  flex-direction: column-reverse;
}

#generalinfo{
  display: grid;
}

.cat{
  grid-row: 2;
}

$(".cat").each(function(){
    $(this).appendTo($this.parent(".li"));
    $(this).remove();
}
);