时间戳

首页 > 解决方案 > 如何将垂直下拉菜单更改为水平下拉菜单

css - 如何将垂直下拉菜单更改为水平下拉菜单

问题描述

我无法将默认的垂直下拉菜单转换为水平菜单。

这是网站：www.ritasaraci.com/homepage

我希望我的链接水平显示而不是垂直显示。

谢谢，

标签： csswordpressdrop-down-menumenuheader

解决方案

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

推荐阅读