Annoying Problem of Aligning CSS Drop Down

Question

Hello all,

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.

Answer 2

Change

#header ul {
float:left;
left:auto;
margin:0 0 0 10px;
padding:0;
z-index:99;
}

to

#header ul {
float:left;
left:auto;
margin:0;
padding:0;
z-index:99;
}

The margin is messing it up.

Answer 3

To align the products words

Try adding the following style:

li.headlink ul li 
{
    margin-left:0px !important;
}

Answer 4

Do you use Firefox at all? There is a very helpful plugin toolbar called Web Developer that will help troubleshoot CSS issues (and many others).

It looks like there is a total of 30px of left margin added to the Link 1 - Link 3 LI elements in these rules:

#cssdropdown li.headlink {
   width: 60px;
   float: left;
   margin-top: 30px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
}

and

#header li {
   list-style-image: none;
   display: inline;
   float: left;
   margin-top: 30px;
   margin-right: 15px;
   margin-bottom: 0pt;
   margin-left: 15px;
}