javascript - 如何将现有菜单变成响应式下拉菜单？

Question

我目前有一个正在构建的菜单，元素已按需要放置，但我希望将某些选项隐藏起来，并在将鼠标悬停在适当的标题上时显示在下方。

我已经尝试用我认为在 CSS 中有意义的方法来实现它(显示:对于需要隐藏的类没有)，但我真的没有比这更进一步了。我还隐藏了一个汉堡菜单图标。

    <header>

        <div class="logo-container">
            <img src="img/bobCircle.svg" alt="your logo here" class="logo">
        </div>

        <nav class="menu">
            <ul class="menuitems">
                <li class="home"><a href="index.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="dropdown"><a href="#">Market <i class="fa fa-caret-down"></i></a></li>
                    <li class="menu2"><a href="#">Buy X</a></li>
                    <li class="menu2"><a href="#">Sell X</a></li>
                <li class="dropdown"><a href="#">Market 2 <i class="fa fa-caret-down"></i></a></li>
                    <li class="menu2"><a href="#">Buy X</a></li>
                    <li class="menu2"><a href="#">Sell X</a></li>
            </ul>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
        </nav>

        <div class="livesupport">
            <button>Contact live support</button>
        </div>

    </header>

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

body {
    background-color: #D7E1E9;
    font-family: 'Poppins', sans-serif;
}

button {
    font-family: 'Poppins', sans-serif;
}

header {
    width: 100%;
    display: flex;
    margin: auto;
    background: #232323;
}

.logo-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex: 1;
}

.logo {
    height: 80px;
}

.menu {
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    flex: 4;
}

.menuitems {
    display: flex;
    list-style-type: none;
    text-decoration: none;
}

.livesupport {
    display: flex;
    height: 50%;
    justify-content: center;
    flex: 1;
}

.menu a {
    text-decoration: none;
    color: white;
    padding: 20px;
    font-size: 18px;
}

.menu a:hover {
    color: #166BA5;
}

.menu .icon {
    display: none;
}

.menu2 {
    display:none;
}

我希望当鼠标悬停在带有箭头的元素下方时，隐藏的元素会出现。

Answer 1

尝试查看当元素的父元素被:hovered 时显示元素。例如:

.menuitems .dropdown .menu2 {
    display: none
}
.menuitems .dropdown:hover .menu2 {
    display: flex
}

基本上是在将鼠标悬停在其 parent 上方时打开/关闭相应字段的显示。

https://www.w3schools.com/cssref/sel_hover.asp