2009-09-16 2 views
0

View Здесь: http://174.132.101.73/~ree/header/Раздражает Проблема выравнивания CSS выпадающим

У меня есть выпадающий. Я пытаюсь получить текст «Ссылка 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; } 

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

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

Спасибо всем

+0

могли бы вы также размещать соответствующие HTML. вроде бы трудно узнать, не видя этого. –

+0

Я добавил URL-адрес небольшой демонстрации. Надеюсь, что это поможет мне! :) – Abs

ответ

1

Изменить

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

в

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

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

+0

Я этого раньше не видел, что это? Также он, по-видимому, исправил его частично, текст «Ссылка 1», «Ссылка 2» и «Ссылка 3» на самом деле не совпадают со словом «продукты». Я должен был сказать это раньше. Должен ли я использовать margin-left с минусом px? – Abs

+0

См. Мое правление о '#header LI'. Вы получили большую прибыль для всех LI в #header. –

0

Изменить

#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; 
} 

Маржа Мессинг его.

+0

Это, похоже, исправить это также, но, как я сказал Четану Састри, он лишь частично исправляет его, так как мне бы очень хотелось, чтобы он был выровнен с словом Products. – Abs

0

Для выравнивания продуктов, слова

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

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

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

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

#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; 
} 
Смежные вопросы