Dropdown menu items not stacking vertically - html

Question

Hi I have a website with a dropdown menu and for some reason its items stack horizontally.
The HTML is like this
<li id="menuitem">a</li>
<ul id="dropdown">
<li id="dropdownelement">b</li>
</ul>
And the CSS sets the ul to hidden unless hover. And li elements to relative
https://jsfiddle.net/u8pmtc4z/

Answer 1

There are a few problems with your implementation.
You can test this demo and see if this is the desired behaviour.
You should set the ul ul elements to be positioned absolute, and your ul li to relative with an inline-block display prop.
Then, change your #navbar ul li:hover ul to be like this:
#navbar ul li:hover ul {
display: block;
position: absolute;
left: 0;
padding: 0;
}
This sets the nested dropdown to be positioned below the parent as well as aligned to the left.
Also, you have used the #accountDropDownElement id twice in your markup. I replaced it as a class in my demo because ids must be unique!
Here's the full code:
#navbar ul {
position: relative;
display: inline-table;
list-style-type: none;
width: 965px;
}
#navbar ul:after {
content: "";
clear: both;
display: block;
}
#navbar ul ul {
display: none;
position: absolute;
top: 66px;
left: 0;
padding: 0;
}
#navbar ul ul li {
float: none;
position: relative;
}
#navbar ul li {
float: left;
padding: 0 10px;
border-radius: 25px;
}
#navbar ul li:hover > a {
border: 1px rgb(204, 255, 102) solid;
background-color: rgb(204, 255, 102);
box-shadow: none;
}
#navbar ul li:hover ul {
display: block;
position: absolute;
left: 0;
padding: 0;
}
#navbar ul li:hover ul li {
float: none;
}
#navbar ul li a {
border-radius: 25px;
border: 1px rgb(57, 232, 38) solid;
background-color: rgb(57, 232, 38);
box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
color: white;
display: block;
float: left;
font-family: "micross";
font-size: 30px;
padding: 15px;
text-decoration: none;
}
#navbar ul li a:hover {
border: 1px rgb(204, 255, 102) solid;
background-color: rgb(204, 255, 102);
box-shadow: none;
}
#accountButton:hover {
cursor: pointer;
}
#accountDropDownImage {
float: left;
}
.accountDropDownElement {
width: 100px;
background-color: rgb(57, 232, 38);
color: white;
font-size: 20px;
margin: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/navbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="navbar">
<ul id="navbarList">
<li id="homeButton">Home</li>
<li id="blogButton">Blog</li>
<li id="downloadsButton">Downloads</li>
<li id="managerButton">Manager</li>
<li id="accountButton"><a id='accountAButton' href='manager.php'>Luke</a>
<ul id='dropDownList'>
<li><p class='accountDropDownElement'>Logout</p></li>
<li><p class='accountDropDownElement'>Login</p></li>
</ul>
</li>
</ul>
</div>

Answer 2

If you adjust the width in your css to be 65 instead of 965 you will see the links stack on the left as Im assuming your wanting.