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

Question

У меня проблемы с преобразованием вертикального раскрывающегося меню по умолчанию в горизонтальное меню.

Это веб-сайт: www.ritasaraci.com/homepage

Я хочу, чтобы мои ссылки отображались горизонтально, а не вертикально.

Спасибо

Answer 1

HTML

<ul class="menu">
    <li>
        <a href="#">Item 1</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-item 1-1</a></li>
            <li><a href="#">Sub-item 1-2</a></li>
            <li><a href="#">Sub-item 1-3</a></li>
            <li><a href="#">Sub-item 1-4</a></li>
            <li><a href="#">Sub-item 1-5</a></li>
            <li><a href="#">Sub-item 1-6</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-item 3-1</a></li>
            <li><a href="#">Sub-item 3-2</a></li>
            <li><a href="#">Sub-item 3-3</a></li>
            <li><a href="#">Sub-item 3-4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
</ul>

CSS

ul.menu{
    width: 940px;
    height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    margin: auto; 
    padding: auto;
    background-color:#dedede; 
}
li{
    float: left;
    width: auto;
}
ul.menu li a {
    display: block;
    width: auto;
    text-decoration: none;
}
ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    display: block;
    position: absolute;
    left: 0;
    height: 40px;
    line-height: 40px;
}
ol, ul {
    list-style: none;
}

ul.menu a, ul.sub-menu a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #0E0500;
    padding: 0 10px;
}
ul.menu li:hover ul {
    width: 940px;
    background: rgb(177, 200, 218);
    visibility: visible;
    opacity: 1;
    transition-property: opacity;
}
ul.menu li:hover {
    background-color: rgb(177, 200, 218);
    transition-duration: 0.3s;
}

Answer 2

Измените свойство отображения Css для отображения: flex

Класс Css отредактирован

 .highlighted .submenu {
    /other css/
    display:flex;
    }  

если вы используете настройщик WordPress, откройте редактор Css и вставьте его для быстрого редактирования

используйте! Важный, чтобы заставить его придерживаться

сохраняйте его согласованным и используйте CSS для изменения состояний

 .menu:hover .submenu {
css
}