Question

我创建了一个响应式下拉菜单，但有一个问题可以帮助我修复。当视图适用于台式机和平板电脑时，菜单工作正常。但是当视图用于移动设备时，我将导航菜单显示为块元素。所述＆＃34;下拉＆＃34; element有一个下拉列表。我想当有人将鼠标悬停在下拉列表元素上并显示下拉列表时，将＃34; Photos＆＃34;元素向下推，而不是显示其上方的下拉列表。

由于

HTML代码：

         <nav class="nav-main">
            <div class="logo">Random Text</div>
            <ul class="ul-main">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown-li"><a href="#" class="dropdown-a">Dropdown</a>
                    <ul class="ul-bottom">
                        <li><a href="#">Random Item</a></li>
                        <li><a href="#">Random Item</a></li>
                        <li><a href="#">Random-Item</a></li>
                    </ul>
                </li>
                <li><a href="#">Photos</a></li>
            </ul>
        </nav>

CSS代码：

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

body {
    font-family: sans-serif;
    background:lightgrey;
}

.nav-main {
    display: flex;
    justify-content: space-around;
    height:120px;
    background:#222;
    align-items: center;
}

.logo {
    color:#fff;
    font-size:30px;
    letter-spacing: 3px;
}

.ul-main {
    display: flex;
}

.ul-main > li {
    margin-right:50px;
    list-style: none;
}

.ul-main > li:last-of-type {
    margin-right:0px;
}

.ul-main > li > a {
    color:#fff;
    display: inline-block;
    padding:10px 20px;
    background:#ff6c00;
    text-decoration: none;
    transition:all .3s ease-in-out;
}

.ul-main > li > a:hover {
    opacity:.7;
}

.ul-main > li:hover > ul {
    display: block;
}

.dropdown-a {
    position: relative;
}

.ul-bottom {
    position: absolute;
    background:#ff6c00;
    display: inline-block;
    display: none;
}

.ul-bottom > li {
    list-style: none;
    display: block;
    border-top:1px solid black;
    transition:all .3s ease-in-out;
}

.ul-bottom > li:hover {
    background:red;
}

.ul-bottom > li > a {
    display: inline-block;
    padding:10px 20px;
    text-decoration: none;
    color:#fff;
}

@media only screen and (max-width:768px) {
    .nav-main {
        flex-direction: column;
    }
}

@media only screen and (max-width:420px) {
    .nav-main {
        flex-direction: column;
        height:auto;
    }

    .ul-main {
        flex-direction: column;
        width:100%;
    }

    .ul-main > li {
        display: block;
        width:100%;
        border-top:1px solid #000;
    }

    .ul-main > li > a {
        display: block;
    }

    .ul-bottom {
        box-shadow: 1px 1px 5px #000;
    }
}

Answer 1

我希望当有人将鼠标悬停在下拉列表元素上并显示下拉列表时，按下＆＃34;照片＆＃34;元素而不是显示其上方的下拉列表。

推动＆＃34;照片＆＃34;当有人将鼠标悬停在下拉列表元素上时，您只需将position的{{1}}重置为.ul-bottom或relative

initial

在移动视图上显示下拉菜单问题

1 个答案: