Html горизонтальное выпадающее меню: Как сделать горизонтальное меню в html

html — элементы выпадающего меню CSS идут горизонтально

Я искал эту проблему в stackoverflow, но ничего не нашел.

Я работал над выпадающим меню в CSS. Когда вы наводите указатель мыши на раскрывающееся меню, элементы раскрывающегося списка отображаются горизонтально, а не вертикально.

HTML

 
заголовок
<ул>
    
Главная
    
Биография
    
Фото
    
Меер
        <ул>
            
учебники
            
инхурен
        
    

 

CSS

 /*заголовок*/
# заголовок {
    цвет фона: #5c931f;
}
#заголовок ул {
    тип стиля списка: нет;
}
#заголовок ли {
    ширина: 100 пикселей;
    граница: 1px сплошной черный;
    дисплей: встроенный;
    цвет фона: #000;
    цвет: #808080;
    положение: родственник;
    выравнивание текста: по центру;
}
#заголовок li:hover {
    цвет синий;
}
/*выпадающее меню*/
.выпадающий ул{
    дисплей: нет;
}
. dropdown: наведите указатель {
    дисплей: блок;
    положение: абсолютное;
}
 

Как сделать элементы раскрывающегося списка вертикальными?

• html
• css
• раскрывающееся меню

Вы активно объявили li для отображения встроенного здесь:

 #header li {
...
дисплей: встроенный;
...
}
 

Встроенное означает, в основном, «не принудительно переходить на следующую строку». Уберите это, и он должен вернуться к поведению блока .

Редактировать: раньше я не замечал вложенных li .

Добавить:

 #header .dropdown li {
    дисплей: блок;
}
 

В качестве альтернативы можно указать только прямой дочерний элемент

li со встроенным (обратите внимание, что это повлияет на все стили, применяемые к li :

 #header > ul > li {
ширина: 100 пикселей;
граница: 1px сплошной черный;
дисплей: встроенный;
цвет фона: #000;
цвет: #808080;
положение: родственник;
выравнивание текста: по центру;
}
 

2

Добавьте/измените следующий код:

 . dropdown ul li{
     дисплей: блок;
}
.dropdown: наведите указатель {
    дисплей: встроенный;
    положение: абсолютное;
    сверху: 0;
    слева: 0;
    плыть налево;
}
 

Ссылка на JS Fiddle:

http://jsfiddle.net/kr2jw577/

Однако требуется некоторая настройка.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Раскрывающееся меню с горизонтальным подменю

HTML Примеры CSS для CSS Widget:Menu Dropdown

1. HOME
2. HTML CSS
3. CSS Widget
4. Menu Dropdown

9010 2 Описание

Выпадающее меню с горизонтальным подменю

Код демонстрации

Результат Посмотреть демонстрацию в отдельном окне

 <голова> <стиль  id  ="compiled-css" type="text/css">
#существующийКонтейнер {  ширина :501px;
}
.меню {  фон  -  цвет  :шартрез;
}
.меню {  цвет : желтый;  высота :11px;  отступ :0 6px;
 текстовое оформление: нет;
}
.меню ли {  дисплей  : встроенный блок;  позиция  :относительная;  граница  -  справа  :2px сплошной синий;  цвет   :розовый;
}
.
No related posts.