Jonas Olesen Jonas Olesen - 7 months ago 8
HTML Question

Vertical dropdown with horizontal submenu allignment

I'm currently trying to make a vertical dropdown menu, with horizontal submenus.

But i cant get the submenu to allign with the parent menu.

Currently the menu works like this:

x

x

x

x>

x - x

But i want it to work like this:

x

x

x

x> - x

x

My code is in the jsfiddle:

https://jsfiddle.net/919qb7u5/

ive tried with all sorts of fixes, with absolute and relative positions, top and bottom spacings.

.dropdown-content ul {
bottom: 0;
left: 100%;
}

Answer

Just give position:relative to .dropdown-content li

.dropdown-content li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  position:relative;
}

Working Fiddle

Comments