你好，我有这个问题，我不能让我的子菜单正常工作， 我是一名初级程序员，所以也许我的代码并不完全正确(很明显，如果某些东西不起作用 XD) 我希望它能工作，这样如果我将鼠标悬停在 de menubar 中的链接上，子菜单就会淡入，如果涉及到一些 jquery 来获得解决方案就可以了。 但是有人可以看看我做错了什么并告诉我应该怎么做吗？ 提前致谢， 砂光机
这是 HTML 代码:
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<body>
<div id="Menu">
<ul class="ulMenu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Home Link</a></li>
</ul>
</li>
<li><a href="#">Maps</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Slideshow</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--menu end-->
</body>
</head>
</html>
这是 CSS 代码(它很大，因为我可能会做一些事情):
#menu{
margin-top: 10px;
display: block;
float: left;
clear: both;
width: 1200px;
height: 60px;
list-style: none;
border-radius: 10px;
text-shadow: 1px 1px 1px black;
border-top: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.25);
box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#menu ul{
list-style: none;
padding-left: 15px;
padding-right: 10px;
margin: 0;
position: absolute;
}
#menu ul li ul {
display: block;
opacity: 0;
padding-right: 20px;
top:50px;
width: 80px;
background: #444;
border-radius: 10px;
text-shadow: 1px 1px 1px black;
border-top: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.25);
box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
}
#menu ul li ul:hover{
transition: opacity .5s ease-in;
opacity: 1;
}
#menu li{
list-style: none;
padding-top: 15px;
padding-bottom: 15px;
display: inline;
position: relative;
float: left;
}
#menu li a,#menu li a:visited{
float: left;
color: #ffffff;
text-decoration: none;
text-align: center;
font-size: 22px;
font-weight: bold;
padding: 0px 89px 0 13px;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#menu li a:hover{
color: #1c478e;
}
最佳答案
更改 :hover至 <li>
http://jsfiddle.net/bateast/XvGAb/
#menu ul li:hover ul {
transition: opacity .5s ease-in;
opacity: 1;
}
关于html - 使用下拉动画创建纯 css 子菜单时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20708741/