当鼠标悬停在li class css上时显示一个ul类 [英] Display a ul class when the mouse hovers over a li class css only
问题描述
我目前正在研究开发一个仅CSS的下拉菜单。这个想法是当鼠标悬停在ul标签上时，它将会出现另一个ul类。
以下是我目前拥有的代码。
HTML
< head> ;
< link href =nav.css =stylesheettype =text / css>
< / head>
< ul class =nav>
< li class =topMenu>< a href =＃>主页< / a>< / li>
< ul class =subMenuid =home>
< li>< a href =＃>你好< / a>< / li>
< li>< a href =＃>全球< / a>< / li>
< / ul>
< / ul>
CSS
.nav，.topMenu，.subMenu
{
position：relative;
list-style：none;
}
.topMenu
{
position：relative;
float：left;
}
.subMenu
{
display：none;
}
.topMenu a：hover + li
{
display：block;
background-color：blue;
}
这个想法是，当鼠标悬停在li class =topMenu那么ul class =subMenuid =home应该出现在下面。
理想情况下，这只应该是CSS格式，不需要任何javascript等。
感谢您的任何帮助可以提供。 在您的< li> 元素内。
< nav>
< ul>
< li>< a href =＃>连结< / a>< / li>
< li>
< a href =＃>连结< / a>
< ul>
< li>< a href =＃>子菜单< / a>< / li>
< li>< a href =＃>子菜单< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>连结< / a>< / li>
< / ul>
< / nav>
以下是一些可帮助您开始使用的CSS：
/ *重置* /
nav a {
text-decoration：none;
字体：12px / 1 Verdana;
颜色：＃000;
display：block; }
nav a：hover {text-decoration：underline; }
nav ul {
list-style：none;
保证金：0;
padding：0; }
nav ul li {margin：0;填充：0; }
/ *顶级菜单* /
nav> ul> li {
float：left;
职位：亲属; }
导航> ul> li> a {
padding：10px 30px;
border-left：1px solid＃000;
display：block;}
nav> ul>李：第一个孩子{margin：0; }
导航> ul> li：第一个孩子a {border：0; }
/ *下拉菜单* /
nav ul li ul {
position：absolute;
背景：#ccc;
宽度：100％;
保证金：0;
padding：0;
display：none; }
nav ul li li li {
text-align：center;
宽度：100％; }
nav ul li ul a {padding：10px 0; }
nav ul li：hover ul {display：block; }
预览： http://jsfiddle.net/Wexcode/BEhvQ/
I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear.
Below is the code that I currently have.
HTML
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<ul class="nav">
<li class="topMenu"><a href="#">Home</a></li>
<ul class="subMenu" id="home">
<li><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
</ul>
CSS
.nav, .topMenu, .subMenu
{
position: relative;
list-style: none;
}
.topMenu
{
position: relative;
float: left;
}
.subMenu
{
display: none;
}
.topMenu a:hover + li
{
display: block;
background-color: blue;
}
The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath.
Ideally this should be only in a CSS format without requiring any javascript etc.
Thanks for any help you can provide.
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li><a href="#">Link</a></li>
<li>
<a href="#">Link</a>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</nav>
Here's some CSS that will help you get started:
/* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview: http://jsfiddle.net/Wexcode/BEhvQ/
这篇关于当鼠标悬停在li class css上时显示一个ul类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
