Html menu vertical css: How to create a vertical menu with CSS?

html — как изменить вертикальное меню css на горизонтальное

Задавать вопрос

спросил 10 лет, 1 месяц назад

Изменено 5 лет, 4 месяца назад

Просмотрено 18 тысяч раз

я использую этот css для моего вертикального меню:

 .vertical-nav{
    ширина: 200 пикселей;
    высота:авто;
    стиль списка: нет;
    плыть налево;
    поле справа: 40px;
}
.vertical-nav li {
    ширина: 200 пикселей;
    высота: 25 пикселей;
    поле: 5px;
    отступ: 5px;
    цвет фона:#666666;
    граница: нет;
    выравнивание текста: по центру;
    плыть налево;
}
.vertical-nav li:hover{
    цвет фона:#f36f25;
    цвет:#FFFFFF;
}
.vertical-nav li a{
    семейство шрифтов: Calibri, Arial;
    размер шрифта: 18px;
    вес шрифта: полужирный;
    цвет:#ffffff;
    текстовое оформление: нет;
}
.  vertical-nav li.current {
    цвет фона:#F36F25;
}
.vertical-nav li.current a {
    цвет:#FFFFFF;
}
 

и вот мой html:

 

Главная
Персонал
Счета
Билеты
Открытый билет

 

как лучше сделать, чтобы ссылки отображались горизонтально?

• HTML
• CSS

Если вы измените ширину .vertical-nav, например, на 100%, li:s будут плавать горизонтально. Ширина навигации должна быть достаточной, чтобы уместить их все, иначе они выстроятся друг под другом.

Я удалил width:200px; и float:left from .vertical-nav и измененный float:left; От до дисплей: встроенный блок; на .vertical-nav li

Demo

 .vertical-nav{
    высота:авто;
    стиль списка: нет;
    поле справа: 40px;
}
. vertical-nav li {
    ширина: 200 пикселей;
    высота: 25 пикселей;
    поле: 5px;
    отступ: 5px;
    цвет фона:#666666;
    граница: нет;
    выравнивание текста: по центру;
    дисплей: встроенный блок;
}
.vertical-nav li:hover{
    цвет фона:#f36f25;
    цвет:#FFFFFF;
}
.vertical-nav li a{
    семейство шрифтов: Calibri, Arial;
    размер шрифта: 18px;
    вес шрифта: полужирный;
    цвет:#ffffff;
    текстовое оформление: нет;
}
.vertical-nav li.current {
    цвет фона:#F36F25;
}
.vertical-nav li.current a {
    цвет:#FFFFFF;
}
 

попытаться изменить ширину .vertical-nav

 .vertical-nav{
    высота:авто;
    стиль списка: нет;
    плыть налево;
    заполнение: 0;
    ширина: 1100 пикселей;
}
 

рабочая демонстрация

добавить это в li

 .vertical-nav li{
    ...
    дисплей: встроенный;
    /*или */
    дисплей: встроенный блок;
    ...
}
 

вы не должны устанавливать одинаковую ширину контейнера, и вы можете попытаться установить ширину контейнера автоматически

 . vertical-nav{
       ширина:авто;
       стиль списка: нет;
       поле справа: 40px;
       }
 

То, что вы написали, верно. Вам просто нужно изменить первый CSS, чтобы включить ul:

 .vertical-nav ul {
скорее, чем:
.vertical-nav {
И дело сделано :)
 

Создание вертикального меню с подменю в CSS3 и HTML

DEMO

Концепция

Простые меню с использованием CSS3 и HTML5 становятся довольно популярными, поскольку для добавления анимации не требуется JQuery или JavaScript. Мы покажем, как быстро создать красивое чистое вертикальное меню с выдвигающимся подменю.

Меню будет использовать вложенный элемент

для отображения подменю.

Разметка HTML 5

CSS​

Родительский CSS

 p, ul, li, div, nav
        {

            заполнение: 0;
            маржа: 0;
        }


        тело
        {
            семейство шрифтов: Calibri;
        }


        #меню {
            переполнение: авто;
            должность: родственница;
            z-индекс: 2;
        }


        .
  родительское меню {
            цвет фона: #0c8fff;
            минимальная ширина: 200 пикселей;
            плыть налево;
        }


        #меню ул
        {
            тип стиля списка: нет;
        }


        #меню уль ли а
        {

            отступ: 10 пикселей 15 пикселей;
            дисплей:блок;
            цвет:#fff;
            текстовое оформление: нет;
        }


            #menu ul li a:hover
            {
                цвет фона:#007ee9;
            } 

Меню работает очень просто. Родительский контейнер должен быть расположен относительно, чтобы подменю могло отображаться внутри него. Вам также необходимо установить z-индекс, чтобы родительское меню было над подменю (это будет описано позже). Каждый элемент

 #menu ul li:hover > ul {

                слева: 200 пикселей;

                -webkit-transition: осталось 200 мс для облегчения входа;

                -moz-transition: осталось 200 мс облегчение;

                -ms-transition: осталось 200 мс для облегчения входа;

                переход: осталось 200 мс облегчение;

            }


            #меню ул ли > ул {

                положение: абсолютное;

                цвет фона: #333;

                сверху: 0;

                слева: -200px;

                минимальная ширина: 200 пикселей;

                z-индекс: -1;

                высота: 100%;

                -webkit-transition: осталось 200 мс для облегчения входа;

                -moz-transition: осталось 200 мс облегчение;

                -ms-transition: осталось 200 мс для облегчения входа;

                переход: осталось 200 мс облегчение;

            }


            #menu ul li >
  ul li a:наведите курсор

            {

                цвет фона:#2e2e2e;

            }