Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Allie O.
Allie O.
11,601 Points

Aligning child element with its parent in a horizontal dropdown navigation

Hello,

I'm working on a horizontal drop down navigation, and having trouble aligning the child elements in the drop down with the parent element. It seems like it should be an easy fix, but I just can't figure it out.

The video list item has two sub items, but they don't align. I think I tried everything I could think of, so I appreciate all the help I can get.

Here's what I have: http://codepen.io/allie007/pen/eCJqk

Thanks a lot in advance!

Frank Meza
Frank Meza
8,393 Points

Hey Allie,

I was fooling around with it and I kinda found a solution, let's see what you think:

nav ul li.has-sub:hover > ul {
    display: block;
    position: absolute;
    left: 58.5%;

(from line 45) - I changed the 50% to 58.5%, and also 535px just about centers the dropdown where I think you want it.

I hope that helps!

2 Answers

Allie O.
Allie O.
11,601 Points
Allie O.
Allie O.
11,601 Points

Hey Frank Meza , thanks for the input! I actually solved my own problem. I think it was related to the navigation being displayed as inline instead of inline block, so the sub items weren't aligning with the parent.

Thanks again.

Frank Meza
Frank Meza
8,393 Points
Frank Meza
Frank Meza
8,393 Points

Good on ya Allie!