Html 将自定义CSS导航栏从水平转换为垂直

我在WordPress网站上有一个自定义的CSS导航菜单，当前子菜单显示为主菜单下方的水平行。子菜单出现在鼠标悬停时

我希望子菜单在鼠标悬停时垂直下拉

地点：

以下是原始子菜单CSS：

#submenunav div
{
    position: relative;
    display: none;
    background: rgb(88,178,71); /* Old browsers */
}

#submenunav div.show
{
    display: block;
    z-index: 5;
}

#submenunav ul 
{
    display: table;
    width: 100%;
    height: 45px;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: solid 1px rgb(29,45,99);
}

#submenunav li
{
    display: table-cell;
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;
}

#submenunav a 
{
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    /* color: rgb(133,162,102); */
    color: rgb(255,255,255);
    text-transform: uppercase;
}

#submenunav li
{
    border-left: solid 1px rgb(29,45,99);
}

#submenunav li:first-child
{
    border: none;
}

我可以通过将li更改为display:block使菜单垂直放置

#submenunav li
{
    display: block;     <---- CHANGED FROM table-cell
    min-width: 130px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 45px;
}

#子菜单
{
display:block；我将使用
wp\u nav\u menu（）
将当前菜单替换为真实的wordpress菜单，请参阅

总之，在主题的functions.php中注册菜单：

function register_my_menu() {
  register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' )

然后将其添加到header.php模板中，删除旧菜单：

<nav><?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?></nav>



然后，您可以通过wordpress后端管理菜单，子菜单将嵌套在第一级
s中。这使得样式设置和定位更加容易，因为您可以相对于父菜单绝对定位子菜单

您的CSS将从
#submenunav ul
更改为类似
nav#main ul li ul
等。如果您将子菜单项作为父菜单项的子菜单项，则可以轻松完成此操作。然后您可以将它们直接放置在父菜单项下，这样可以减少代码（HTML和CSS）重要的是，正如下面所建议的，使用WordPress菜单系统将是一个好主意。
function register_my_menu() {
  register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' )

<nav><?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?></nav>