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 troy beckett
troy beckett
12,035 Points

help with drop down menu

Hi,

I was playing around trying to make a quick website and came across a few problems.

Here is my website below:

http://codepen.io/tbeckett24/pen/CDkdG

My problem is my drop down menu..

when you hover over 'academy and youth' why does items u16 , u15, u14 all bunch up onto their above line. What I want is for them to each to a line themselves like all the rest of the drop downs on the page. How do I achieve this.

1 Answer

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Troy

Just had a look through so can't guarantee that it isn't going to cause issues elsewhere but I've changed your display from in-line block (as below) as this will try to put everything next to each other if there's enough room.

I think changing it to block should go back to the default action of taking up the whole line with each element (if I'm remembering that properly).

ul#menu ul.sub-menu li {
  list-style: none;
  display: block;
}

Hope it helps!