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
更多推荐
发布评论