Раздражающая проблема выравнивания CSS выпадающего

Question

Смотреть здесь: http://174.132.101.73/~ree/header/

У меня есть выпадающий список. Я пытаюсь заставить текст «Ссылка 1», «Ссылка 2» и «Ссылка 3» выровнять по левому краю ссылки на товары при наведении на нее курсора. Но я не могу заставить это работать на меня. Я уверен, что это что-то простое. Вы найдете соответствующий код CSS внизу файла CSS. Вот фрагмент кода, в котором, как мне кажется, возникает проблема.

/* 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; }

Я также пытаюсь заставить рамку вокруг ссылок («Ссылка 1», «Ссылка 2» и «Ссылка 3») находиться под ссылкой на товары, а не немного вправо, как сейчас. 1007 *

Любая помощь приветствуется, так как это сводит меня с ума!

Спасибо всем

Answer 1

Изменение

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

до

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

Проблема в том, что вы добавляете левое поле в 30px ко всем UL внутри #header, в то время как оно, вероятно, нужно только для непосредственных потомков. Возможно, то же самое с #header LI.

Answer 2

Вы вообще используете Firefox? Существует очень полезная панель инструментов для плагинов под названием Web Developer, которая поможет устранить проблемы с CSS (и многие другие).

Похоже, что к элементам Link 1 - Link 3 LI в этих правилах добавлено 30px левого поля:

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

и

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

Answer 3

Для выравнивания слов товаров

Попробуйте добавить следующий стиль:

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

Answer 4

Изменение

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

до

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

Маржа все испортила.