Question

View Here: http://174.132.101.73/~ree/header/

I have a drop down box. I am trying to get the text “Link 1”, “Link 2” and “Link 3” to align left under the products link when you hover over it. But I can not get that to work for the life of me. I am sure its something simple. You will find the CSS code in question at the bottom of the CSS file. Here is the snippet where I think the problem occurs.

/* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

/* Head links */
#cssdropdown li.headlink { width:60px; float: left; text-align: center; }

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 5px; }
#cssdropdown li.headlink ul li a:hover { background-color: #333; }

I am also trying to get the box it self around the links (“Link 1”, “Link 2” and “Link 3”) to be underneath the products link and not slightly to the right like it is now.

Any help appreciated as this is driving me mad!

Thanks all

Answer 1

Change

#header UL {margin: 0 0 0 30px}

to

#header > UL {margin: 0 0 0 30px}

Problem is that you are adding a left margin of 30px to all ULs inside #header while you probably need it only for the immediate children. Perhaps the same with #header LI.