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