Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

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

Вертикальное меню с выпадающим списком на html на CSS

Чтобы легко создать вертикальное меню с выпадающим подменю в WordPress (Вордпресс – рус.), которое будет находиться слева или справа, достаточно добавить указанный код в файл стилей на CSS:

li {
list-style-type: none; /* Убираем маркеры */
}

.menu-right-container ul#menu-right li.menu-item-has-children,li.menu-item-has-children:hover{
position:relative;
}

.menu-right-container ul#>menu-right li.menu-item-has-children ul.sub-menu{
display: none;
padding-right: 10px;
}

.menu-right-container ul#menu-right li.menu-item-has-children:hover ul.sub-menu{
display: block;
position:absolute;
width: 100%;
left:-100%;
top: 0%;
}

.menu-right-container ul#menu-right li.menu-item-has-children:hover ul.sub-menu>li:first-child:before{
content: '';
border-left: 10px solid green;
border-right: 10px solid transparent;/*transparent - прозрачный фон*/
border-top: 10px solid transparent;/*transparent - прозрачный фон*/
border-bottom: 10px solid transparent;/*transparent - прозрачный фон*/
position: absolute;
right: -10px;
top: 10px;
}

#menu-right{
margin-bottom: 75%;
}

При этом почти все указанные классы являются стандартными и надо только вставить свое значение вместо menu-right.
А для изменения внешнего вида вашего меню нужно просто изменить желаемые параметры в соответствии с требованиями.

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

Вертикальное меню с выпадающим списком на html на CSS

Чтобы легко создать вертикальное меню с выпадающим подменю в WordPress (Вордпресс – рус.), которое будет находиться слева или справа, достаточно добавить указанный код в файл стилей на CSS:

li {
list-style-type: none; /* Убираем маркеры */
}

.menu-right-container ul#menu-right li.menu-item-has-children,li.menu-item-has-children:hover{
position:relative;
}

.menu-right-container ul#>menu-right li.menu-item-has-children ul.sub-menu{
display: none;
padding-right: 10px;
}

.menu-right-container ul#menu-right li.menu-item-has-children:hover ul.sub-menu{
display: block;
position:absolute;
width: 100%;
left:-100%;
top: 0%;
}

.menu-right-container ul#menu-right li.menu-item-has-children:hover ul.sub-menu>li:first-child:before{
content: '';
border-left: 10px solid green;
border-right: 10px solid transparent;/*transparent - прозрачный фон*/
border-top: 10px solid transparent;/*transparent - прозрачный фон*/
border-bottom: 10px solid transparent;/*transparent - прозрачный фон*/
position: absolute;
right: -10px;
top: 10px;
}

#menu-right{
margin-bottom: 75%;
}

При этом почти все указанные классы являются стандартными и надо только вставить свое значение вместо menu-right.
А для изменения внешнего вида вашего меню нужно просто изменить желаемые параметры в соответствии с требованиями.