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

尝试:hover设置父项后显示项目。例如：

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

将鼠标悬停在其父母上时，基本上可以打开/关闭相应字段的显示。

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

Answer 2

我知道了。我需要在现有的li元素内创建另一个ul，以将它们相互堆叠。

如何使现有菜单变成响应式下拉菜单？

2 个答案: