在移动视图上出现下拉菜单问题

Question

我已经创建了一个响应式下拉导航菜单，但有一个问题您可以帮我解决。当视图适用于台式机和平板电脑时，菜单可以正常工作。但是，当视图用于移动设备时，我将导航菜单显示为块元素。 "dropdown" 元素有一个下拉列表。我希望当有人将鼠标悬停在下拉元素上并显示下拉列表时，将 "Photos" 元素向下推，而不是在其上方显示下拉列表。

谢谢

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

I would like when someone hover over the dropdown element and the dropdown list is shown, to push the "Photos"element down instead of showing the dropdown list above it.

要在有人悬停下拉元素时推送 "Photos" 元素，您只需将 .ul-bottom 的 position 重置为 relative 或 initial

@media only screen and (max-width:420px) {
    .ul-bottom { 
        position: relative;
    }
}

在移动视图上出现下拉菜单问题

Dropdown Menu Issue when on Mobile View

html

css

dropdown