如何修复不显示的子菜单？

Question

我目前遇到了一个问题，即我的子菜单未显示在“商店”下。 我不确定是什么导致它保持隐藏状态，我已经参考了 w3schools https://www.w3schools.com/howto/howto_css_subnav.asp 上发布的内容以寻求潜在的修复，但似乎我已经把自己搞砸了。

    #nav {
        position: absolute;
        display: block;
        top: 6em;
        left: 0;
        width: 100%;
        text-align: center;
    }

        #nav > ul {
            display: inline-block;
            border-radius: 0.35em;
            box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
            padding: 0 1.5em 0 1.5em;
        }

            #nav > ul > li {
                display: inline-block;
                text-align: center;
                padding: 0 1.5em 0 1.5em;
            }

                #nav > ul > li > ul {
                    display: none;
                }

                #nav > ul > li > a, #nav > ul > li > span {
                    display: block;
                    color: #eee;
                    color: rgba(255, 255, 255, 0.75);
                    text-transform: uppercase;
                    text-decoration: none;
                    font-size: 0.7em;
                    letter-spacing: 0.25em;
                    height: 5em;
                    line-height: 5em;
                    -moz-transition: all .25s ease-in-out;
                    -webkit-transition: all .25s ease-in-out;
                    -o-transition: all .25s ease-in-out;
                    -ms-transition: all .25s ease-in-out;
                    transition: all .25s ease-in-out;
                    outline: 0;
                }

                #nav > ul > li:hover > a {
                    color: rgb(0, 0, 0);
                }

                #nav > ul > li.active > a, #nav > ul > li.active > span {
                    color: rgb(0, 0, 0);
        }

        #nav > ul > li > ul:hover > a {
          display: block;
                }

<nav id="nav">
            <ul>
                <li class="active"><a href="index.html">Home</a></li>
                <li class="current"><a href="index.html">Book An Appointment</a></li>
                <li><a href="#">Shop</a>
                    <ul>
                        <li><a href="yellow.html">Extensions & Wigs</a></li>
                        <li><a href="blue.html">Candles</a></li>
                    </ul>
                </li>
                <li><a href="left-sidebar.html">Contact</a></li>
            </ul>
        </nav>

Answer 1

您似乎正试图将鼠标悬停在一个甚至还没有在 DOM 中呈现的元素上......但是。看看你的样式表的这个片段。

#nav > ul > li > ul {
   display: none;
}
#nav > ul > li > ul:hover > a {
   display: block;
}

您正在为 ul 元素上从未显示过的悬停伪类设置样式。 更好的方法是在列表元素本身上使用悬停类。像这样：

/* from this */
#nav > ul > li > ul:hover > a {
   display: block;
}

/* to this */
#nav>ul>li:hover ul {
   display: block;
} 

此外，由于您的 子菜单 ul 并非绝对放置在 nav 内，它会占用空间并可能导致商店悬停时出现意外的设计更改。

Answer 2

这是我在观看一个快速的 youtube 视频后得到的，子菜单现在显示，但整体菜单会自行调整大小

<div class="nav">
            <ul>
                <li>Home</li>
                <li>Book An Appointment</li>
                <li>Shop
                    <ul>
                        <li>Extensions & Wigs</li>
                        <li>Candles</li>
                    </ul>
                </li>
            </ul>
        </div>

.nav {
    position: center;
    display: block;
    top: 6em;
    text-align: center;
    }

    .nav ul {
        display: inline-block;
        border-radius: 0.35em;
        box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
        padding: 0 1.5em 0 1.5em;
        }

        .nav ul li {
            display: inline-block;
            text-align: center;
            padding: 0 1.5em 0 1.5em;
            }

            .nav ul ul {
                display: none;
                    }
                    .nav ul li {
            display: block;$$
            color: #eee;
            color: rgba(255, 255, 255, 0.75);
            text-transform: uppercase;
            text-decoration: none;
            font-size: 0.8em;
            letter-spacing: 0.25em;
            height: 5em;
            line-height: 5em;
                        float: left;
            -moz-transition: all .25s ease-in-out;
            -webkit-transition: all .25s ease-in-out;
            -o-transition: all .25s ease-in-out;
            -ms-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
            outline: 0;
                    }

        .nav ul li:hover {
            color: rgb(0, 0, 0);
                }
        .nav ul li.active > a, .nav ul li.active > span {
                color: rgb(0, 0, 0);
        }

        .nav ul li:hover > ul {
          display: block;
                }