user6668541 user6668541 - 4 months ago 13
CSS Question

Drop down menu stops working for smaller screens

I'm working on creating a drop down menu, but I've noticed that is only works under certain circumstances.
When isolated by itself, the menu works perfectly: https://jsfiddle.net/Lhiwseolh/zgt3em1z/

<nav class = "navigation">
<div class="button-wrapper">
<button>
<p>Resume</p>
</button>
<div class="hidden">
<div class="menu-option">
<p>Download<p>
</div>
<div class="menu-option">
<p>
<a href ="http://www.timothywynia.com/resume.html">
View Online
</a>
</p>
</div>
</div>
</div>
<div class="button-wrapper">
<button>
<p>3D Modeling</p>
</button>
<div class="hidden">
<div class="menu-option">
<p>Portfolio(PDF)<p>
</div>
<div class="menu-option">
<p>Projects</p>
</div>
</div>
</div>
<div class="button-wrapper">
<button>
<p>Programming</p>
</button>
<div class="hidden">
<div class="menu-option">
<p>Projects<p>
</div>
<div class="menu-option">
<p>Code Bits</p>
</div>
</div>
</div>
<div class="button-wrapper">
<button>
<p>Other</p>
</button>
<div class="hidden">
<div class="menu-option">
<p>NA<p>
</div>
</div>
</div>
<div class="button-wrapper">
<button>
<p>Contact</p>
</button>
</div>
</nav>


css:

.button-wrapper {
color: black;
}

.hidden {
display: none;
margin: auto;
width: inherit
border: 1px solid black;
}

.hidden p {
width: inherit;
padding: 1px 0px 1px 10px;
background-color: white;
}

.menu-option:hover p {
background: #888;
}

a {
text-decoration: none;
color: black;
}

button {
float: right;
width: auto;
height: 40px;
padding: 10px 30px;

}

div {
background: #555;
margin: 0px;
border: 0px;
padding: 0px;

}

body, div, nav, footer {
background: #555;
margin: 0px;
border: 0px;
padding: 0px;
}

h2 {
width: 100%;
margin: 10px auto;
color: white;
text-align: center;
}

header div h1 {
color: white;
text-align: center;
margin: 0px;
padding: 11px;
height: 100px;
}

header, .content, footer {
width: 98%;
margin: 1%;
padding: 1%;
}

.button-wrapper:hover .hidden, .hidden:hover {
display: block;
}

p {
margin: 0px;
}

nav {
margin-left: auto;
margin-top: 60px;
display: flex;
background: none;
}


When apart of the entire webpage it works if the screen is large enough, but once the screen width gets small enough (around 900px), the menu disappears when you try to mouse over the last option: https://jsfiddle.net/Lhiwseolh/z69u1tm0/2/

Any ideas what is keeping the menu from functioning properly?

Answer

There's a positioning issue created by the fact that the buttons are floated, but the dropdown isn't cleared. To fix it, just add clear: both; and position: relative; to your .hidden panel elements.

Example:

.hidden {
    clear: both; // Add this line
    position: relative; // And this line
    display: none;
    margin: auto;
    width: inherit
    border: 1px solid black;
}
Comments