Grace Sawyer Grace Sawyer - 2 months ago 18
CSS Question

How to Make Dropdown Menu li Vertically Listed

I can't find a way to make my header dropdown to be positioned the way I want it to. First off, the dropdown is horizontal, while it is supposed to stack up under each other. Second, the dropdown is not vertically aligned with the parent link, so I want it to be directly under its parent link and not a few pixels to the right of it. Using the left: __% only worked on one while totally pulling off track the other dropdown of a different parent, so it wasn't relative to the position of the parent of the dropdown.

Here is the jsfiddle: https://jsfiddle.net/u6v44hdw/

I'm having trouble and I think I'm supposed to add the code here somewhere:

li ul {
display: none;
position: absolute;
top: 15%;
padding-left: 1px;
}


Thanks!

Answer Source

Your missing the class="sub" in <ul> sub menu.

Edit:

Here is he full example of what you want: https://jsfiddle.net/u6v44hdw/2/

Edit2: I think you don't need that z-index.