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

Posted 2023-04-13

【中文标题】如何修复不显示的子菜单？

【英文标题】：How can I fix submenu that won't show?

【发布时间】：2020-12-12 01:44:01

【问题描述】：

我目前遇到了一个问题，即我的子菜单未显示在“商店”下。 我不确定是什么导致它保持隐藏状态，我已经参考了 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>

【参考方案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 内，它会占用空间并可能导致商店悬停时出现意外的设计更改。

【讨论】：

@peter 感谢您的快速响应，这确实有效，但您对意外的设计更改也是正确的。并不意味着听起来无知，但我没有关注关于子菜单 ul 没有被绝对放置在导航中的部分。是不是因为我没有给它指定ID？

好的。因此，当您使用position: relative 时，它会将您的元素与兄弟元素相关联，并且可能会占用父 div 中的空间。例如，将 2 个小盒子放在一个大盒子里。两个盒子都将占据彼此的空间。但是当您使用position: absolute 时，它会将您的元素相对于最近的相对父级放置。请阅读本文以更好地理解事物。 Difference between css position absolute versus relative

【参考方案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;