悬停时子菜单消失

Question

当我将鼠标移出 a 元素时，我的子菜单消失了。我是一名学生，并且是网络开发的新手，所以我想在谷歌搜索几个小时后我会在这里问..

我试过使用 .topbar #menus li:hover + .sub，但是子菜单根本不会出现。

感谢所有回答。

.topbar #menus{
    position: absolute;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
}

.topbar #menus > li{
    border: 2px solid rgb(20, 20, 20);
    
}

.topbar #menus li a{
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

.sub a{
    display: inline-block;
    width: 100%;
    height: 100%;
}


.sub{
    display: none;
    border: 2px solid black;
}

.topbar #menus li a:hover + .sub{
    display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Element</title>
</head>
<body>
    <div class="topbar">
        <ul id="menus">
            <li id="food"><a href="food.html">FOOD</a>
                <ul class="sub">
                    <li id="breakfast"><a href="#">BREAKFAST</a></li>
                </ul>
            </li>
            <li id="drinks"><a href="drinks.html">DRINKS</a>
                <ul class="sub">
                    <li id="colddrinks"><a href="#">COLD DRINKS</a></li>
                </ul>
            </li>
            <li id="offers"><a href="offers.html">OFFERS</a>
                <ul class="sub">
                    <li id="foodoffers"><a href="#">FOOD OFFERS</a></li>
                </ul>
            </li>
        </ul>
        
    </div>
</body>
</html>

Answer 1

你好！

  .topbar #menus li:hover .sub{
    display: block;
}

我把线改成这样了！祝你好运！

悬停时子菜单消失

Submenu disappear on hover

html

css

hover

submenu