当鼠标悬停在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屋!