Question

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

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

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

我已将该网站置于此状态以进行演示。

我需要完成的是让子菜单显示在鼠标主菜单项的正下方。我希望他们在左边对齐。

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

我对CSS很陌生，想象一下必须有一个更好的＆＃34;这样做的方法。

创建菜单的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等等。

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

1 个答案: