javascript - 使用 css 显示子菜单

Question

这是我的菜单。当我将鼠标移到最后一项时，我想显示子菜单(在最后一项中)。我试图只用 css 来做，但它不起作用。这是代码

#submenu {
    display: block;
    position:absolute;
    float:right;
    right:26px;
    background-color:#f1f3f5;
    width:21%;
}
#submenu li {
    border-bottom: 1px solid #c2c5c9;
    padding: 5px 5px;
    text-align:right;
}
#submenu li:first-child {
    padding-top: 10px;
}
#submenu li:last-child {
    border-bottom: none;
}
#submenu li a {
    border-right: 0 !important;
    padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
    display:block;
}

<nav>
    <a href="#" target="_self">First item</a>
    <a href="#" target="_self">Second item</a>
    <a href="#" class="last" target="_self">Third item
        <ul id="submenu">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
        </ul>                                                       
    </a>
</nav>

当我将鼠标悬停在最后一个导航项上时，是否可以显示/隐藏子菜单？

Answer 1

这是你可以这样做的方法:

nav a.last:hover+#submenu { display:block;} 

完整运行示例:

#submenu {
    display: none;
    position:absolute;
    float:right;
    right:26px;
    background-color:#f1f3f5;
    width:21%;
}
#submenu li {
    border-bottom: 1px solid #c2c5c9;
    padding: 5px 5px;
    text-align:right;
}
#submenu li:first-child {
    padding-top: 10px;
}
#submenu li:last-child {
    border-bottom: none;
}
#submenu li a {
    border-right: 0 !important;
    padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
    display:block;
}
nav a.last:hover+#submenu { display:block;} 

<nav>
    <a href="#" target="_self">First item</a>
    <a href="#" target="_self">Second item</a>
    <a href="#" class="last" target="_self">Third item
        <ul id="submenu">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
        </ul>                                                       
    </a>
</nav