Question

我有问题。我不知道代码有什么问题，因为当我将鼠标悬停在“关于我们”上时，子菜单没有显示。我确实将子菜单显示为：none，然后将鼠标悬停时，它显示为：block，但是什么也没有发生。谢谢您的帮助

userChanges() notify these cases;

foreach i in statefip{
   reg lnwage female parent age fulltime educfin i
}

Answer 1

我的方法与 animation 子菜单的打开和关闭略有不同，并且更短，我使用scale代替display来制作动画；

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#nav_menu{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav_menu li{
    float: left;
    position: relative;
}
#nav_menu li a{
    display: block;
    width: 160px;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    background-color: #800000;
    color: white;
    font-weight: bold;
    text-align: center;
}
#nav_menu .current{
    color: yellow;
}
#nav_menu #sub_menu{
    position: absolute;
    top: 100%;
    list-style: none;
    padding: 0;
    transform : scaleY(0);
    transform-origin: top;
    transition: all 0.4s;
}



#nav_menu li:hover #sub_menu{
  transform: scaleY(1);
}


#nav_menu #sub_menu li a{
    float: right;
}

<ul id="nav_menu">
        <li><a href="index.html" class="current">Home</a></li>
        <li><a href="speakers.html">Speakers</a></li>
        <li><a href="luncheons.html">Luncheons</a></li>
        <li><a href="tickets.html">Tickets</a></li>
        <li><a href="aboutus.html">About Us</a>
            <ul id="sub_menu">
                <li><a href="">Our History</a></li>
                <li><a href="">Board of Directors</a></li>
                <li><a href="">Past Speakers</a></li>
                <li><a href="">Contact Information</a></li>
            </ul>
        </li>
</ul>

Answer 2

要在悬停时显示子菜单，您需要这样编写：

#nav_menu li:hover #sub_menu {
    display: block;
}

因为您正在访问#sub_menu选择器。另外，您需要添加position: relative选择器#nav_menu li与选择器position: absolute的{{1}}的正确性有关。并为同一选择器#nav_menu #sub_menu的选择器添加padding: 0，以使其在主菜单下对齐。

#nav_menu #sub_menu

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#nav_menu{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav_menu li{
    float: left;
    position: relative;
}
#nav_menu li a{
    display: block;
    width: 160px;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    background-color: #800000;
    color: white;
    font-weight: bold;
    text-align: center;
}
#nav_menu .current{
    color: yellow;
}
#nav_menu #sub_menu{
    display: none;
    position: absolute;
    top: 100%;
    list-style: none;
    padding: 0;
}

/*#nav_menu #sub_menu:hover{
    display: block;
}*/

#nav_menu li:hover #sub_menu{
    display: block;
}

#nav_menu #sub_menu li a{
    float: right;
}

鼠标悬停时子菜单不显示

2 个答案: