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

Question

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

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

网站:My Site

这是原始子菜单 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;
}

问题变成子菜单仍然跨越整个子菜单 av div。我可以通过调整 submenunav div 的宽度来纠正这个问题。

 #submenunav div
{
    position: relative;
    width: 25%;                 <---------------CHANGED FROM 100%
    display: none;
    background: rgb(88,178,71); /* Old browsers */
}

出于演示目的，我已将网站保留在该状态。

我需要完成的是让子菜单出现在鼠标悬停的主菜单项的正下方。我希望它们在左侧对齐。

我想我需要为每个主导航按钮创建一个 div 容器，并按这种方式调整每个按钮的大小。

我是 CSS 的新手，我想一定有一种“更好”的方法来做到这一点。

创建菜单的 WordPress header.php 中的 html 和 php:

<nav>
                    <div class="menu-main-small-container">
                    <ul class="menu">
                        <li class="menu-item home <?php if ($currCat == "home") { echo "current_page_item";} ?>">
                            <a data-category="home" href="https://secure.reilycenter.com/test_area/">HOME</a></li>
                        <li class="menu-item aquatics <?php if ($currCat == "aquatics") { echo "current_page_item";} ?>">
                            <a data-category="aquatics" href="/test_area/?page_id=182">AQUATICS</a></li>
                        <li class="menu-item clubsports <?php if ($currCat == "clubsports") { echo "current_page_item";} ?>">
                            <a data-category="clubsports" href="/test_area/?page_id=196">CLUB SPORTS</a></li>
                        <li class="menu-item group-exercise <?php if ($currCat == "group-exercise") { echo "current_page_item";} ?>">
                            <a data-category="group-exercise" href="/test_area/?page_id=87">FITNESS PROGRAMS</a></li>
                        <li class="menu-item intramurals <?php if ($currCat == "intramuralsports") { echo "current_page_item";} ?>">
                            <a data-category="intramurals" href="/test_area/?page_id=137">INTRAMURALS</a></li>
                        <li class="menu-item outdoor <?php if ($currCat == "outdoor") { echo "current_page_item";} ?>">
                            <a data-category="outdoor" href="/test_area/?page_id=211">OUTDOOR ADVENTURES</a></li>
                        <li class="menu-item youth <?php if ($currCat == "youth") { echo "current_page_item";} ?>">
                            <a data-category="youth" href="/test_area/?page_id=522">YOUTH</a></li>
                    </ul>
                    </div>
                </nav>
                <div id="submenunav">
                    <?php
                        $categories = get_categories();
                        foreach($categories as $category)
                        { 
                            wp_nav_menu( array('theme_location' => 'header','menu' => $category->cat_name,'fallback_cb' => 'mytheme_nav_fallback') );
                        }
                    ?>
                </div>

Answer 1

我会使用 wp_nav_menu() 将当前菜单替换为真正的 wordpress 菜单, 请参阅 the docs .

总而言之，在主题的 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 后端管理菜单，子菜单将嵌套 <ul>在第一层里面 <li>秒。这使得样式和定位变得更加容易，因为您可以相对于父菜单绝对定位子菜单。

您的 CSS 将从 #submenunav ul 更改类似于 nav#main ul li ul等等。