Html 为什么我的:悬停不起作用?
嗨,我正在尝试建立一个不同级别的菜单。当我试图将鼠标悬停在我的Html 为什么我的:悬停不起作用?,html,css,hover,Html,Css,Hover,嗨,我正在尝试建立一个不同级别的菜单。当我试图将鼠标悬停在我的li项目上以显示下一个级别时,它不起作用 有人能帮我吗 CSS的代码是: /********************* RESET ********************/ .menu, .memu ul{ margin:0; padding: 0; list-style: none; } /********************* MENU ITEMS ********************/ .
li
项目上以显示下一个级别时,它不起作用
有人能帮我吗
CSS的代码是:
/********************* RESET ********************/
.menu, .memu ul{
margin:0;
padding: 0;
list-style: none;
}
/********************* MENU ITEMS ********************/
.menu > li {float:left;}
.menu > li.floatr{float:right;}
.menu li{position:relative;}
.menu li > a{display:block;}
/********************* SUB MENU ********************/
.menu ul{
display:none;
position:absolute;
width:125px;
}
.menu li:hover > ul {display:block;}
.menu ul ul{
top:0px;
left:125px;
}
.menu > li.floatr > ul {right:0;}
.menu > li.floatr > ul ul {left:-125px;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="padding:20px;">
<ul class="menu">
<li><a href="#">Blog</a></li>
<!-- strat level 2 -->
<ul>
<li><a href="#">Add post</a></li>
<li><a href="#">Archive</a></li>
<!-- start level 3 -->
<ul>
<li><a href="#">By Author</a></li>
<li><a href="#">By Year</a></li>
<li><a href="#">By Category</a></li>
</ul>
<!-- end level 3 -->
<li><a href="#">Comments <span class="bubble">50</span></a></li>
</ul>
<!-- end level 2 -->
<li><a href="#">Products</a></li>
<li><a href="#">Messages <span class="bubble-alt">4</span></a></li>
<li><a href="#">Updates <span class="bubble">23</span></a></li>
<li class="floatr"><a href="#">Envanto</a></li>
<li class="floatr"><a href="#">Social</a></li>
<!-- strat level 2 -->
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
</ul>
<!-- end level 2 -->
</ul>
</body>
</html>
而html是:
/********************* RESET ********************/
.menu, .memu ul{
margin:0;
padding: 0;
list-style: none;
}
/********************* MENU ITEMS ********************/
.menu > li {float:left;}
.menu > li.floatr{float:right;}
.menu li{position:relative;}
.menu li > a{display:block;}
/********************* SUB MENU ********************/
.menu ul{
display:none;
position:absolute;
width:125px;
}
.menu li:hover > ul {display:block;}
.menu ul ul{
top:0px;
left:125px;
}
.menu > li.floatr > ul {right:0;}
.menu > li.floatr > ul ul {left:-125px;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="padding:20px;">
<ul class="menu">
<li><a href="#">Blog</a></li>
<!-- strat level 2 -->
<ul>
<li><a href="#">Add post</a></li>
<li><a href="#">Archive</a></li>
<!-- start level 3 -->
<ul>
<li><a href="#">By Author</a></li>
<li><a href="#">By Year</a></li>
<li><a href="#">By Category</a></li>
</ul>
<!-- end level 3 -->
<li><a href="#">Comments <span class="bubble">50</span></a></li>
</ul>
<!-- end level 2 -->
<li><a href="#">Products</a></li>
<li><a href="#">Messages <span class="bubble-alt">4</span></a></li>
<li><a href="#">Updates <span class="bubble">23</span></a></li>
<li class="floatr"><a href="#">Envanto</a></li>
<li class="floatr"><a href="#">Social</a></li>
<!-- strat level 2 -->
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
</ul>
<!-- end level 2 -->
</ul>
</body>
</html>
菜单
您实际上是在使用菜单li:hover>ul
的列表项中以无序列表为目标
但是在HTML中,您的
不在
内,而是在后面
您可以通过将
放在前一个中来修改HTML以适应CSS选择器,也可以使用相邻的同级选择器(+)代替。菜单li:hover+ul
您实际上是将无序列表放在带有的列表项中。菜单li:hover>ul
但是在HTML中,您的
不在
内,而是在后面
您可以通过将
放在前面的
中来修改HTML以适应CSS选择器,也可以使用相邻的同级选择器(+)相反,菜单li:hover+ul
你必须将子菜单ul
放在将要悬停的li
中。你必须将子菜单ul
放在将要悬停的li
中。好的,你完全正确@RaphaelDDL我在中更改了,工作非常完美。真的非常感谢appreciate@Trapo如果这个答案对你有效,请记住点击复选标记,将其标记为你接受的答案。好的,你完全正确@RaphaelDDL我在- 中更改了
,效果非常好。真的非常感谢appreciate@Trapo如果此答案对您有效,请记住单击复选标记将其标记为您接受的答案。