CSS菜单悬停效果(CSS Menu hover effect)

我正在尝试在下拉菜单中创建悬停效果，但我无法弄清楚如何做到这一点。

我想要做的是：

而不是这个：

我的代码 - 你也可以在这里看到， （更新版本）

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

任何帮助将不胜感激。

I'm trying to create a hover effect in my drop down menu but I can't figure out how to do it.

What I want to do is this:

instead of this:

My Code - You can also see it 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; }

Any help will be appreciated.

最满意答案

工作小提琴：

更改以下两种样式：

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

Working fiddle:

Change the styles for the below two:

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

And add:

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

In order to style the sub-menus.

The first (li:hover) you want to set a bottom border - you can change the width of this border from 1px to something more thick, say, 3px