NoName84 NoName84 - 2 months ago 6
CSS Question

Dropdown Menu Issue when on Mobile View

I have created a responsive dropdown navigation menu but there is one issue that you can help me to fix. The menu is working properly when the view is for desktops and tablets. However when the view is for mobile devices i am showing my navigation menu as block elements. The"dropdown" element has a dropdown list. 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.

Thanks

HTML Code:

<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 Code:

* {
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

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.

To push the "Photos" element when someone hover the dropdown element, you can just reset the position of .ul-bottom to relative or initial

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