html - CSS 菜单悬停效果

Question

我想在我的下拉菜单中创建悬停效果，但我不知道该怎么做。

我想做的是:

而不是这个:

我的代码 - 你也可以看到它here , (updated version)

HTML:

<nav>
    <ul>
        <li><a href="#">One</a>
            <ul>
                <li><a href="1.html">1.1</a></li>
                <li><a href="2.html">1.2</a>
            </ul>
        </li>
        <li><a href="#">Two</a>
            <ul>
                <li><a href="3.html">2.1</a></li>
                <li><a href="4.html">2.2</a></li>
                <li><a href="5.html">2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Three</a>
            <ul>
                <li><a href="6.html">3.1</a></li>
                <li><a href="7.html">3.2</a></li>
            </ul>
        </li>
        <li><a href="8.html">Four</a></li>
    </ul>
</nav>

CSS:

nav {
    float: left;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
}
nav ul li:hover {
    background-color: #000;
}
nav ul li a:hover {
    color: #fff;
}
nav ul li a {
    display: block;
    padding: 25px 15px;
    color: #6F0;
    text-decoration: none;
}
nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #000;
}

我们将不胜感激。

Answer 1

Working fiddle:

改变下面两个的样式:

nav ul li:hover {
border-bottom: 1px solid #000;
color: #000;
}

nav ul li a:hover {
color: #000;
}

并添加:

nav ul li:hover li:hover{
        background: #000;
}

为了设置子菜单的样式。

您要设置底部边框的第一个 (li:hover) - 您可以将此边框的宽度从 1px 更改为更粗的值，例如，3px