我希望你能帮助我。我有一个用于所有浏览器的下拉菜单，但出于某种原因，从今天开始它停止显示下拉子菜单。
能否请您看看并告诉我发生了什么事？我已经花了大约 3 个小时来弄清楚这个问题。我已将代码压缩到最低限度。
提前致谢...
<!DOCTYPE html>
<html lang="en">
<head>
<title>title here</title>
<style type="text/css">
ul
{
list-style: none;
}
body
{
font-size: 12px; /* Base Font Size */
line-height: 1.5; /* 21px */
color: #525252;
font-family: "Helvetica" ,Arial,sans-serif;
}
a
{
color: #409ff8;
text-decoration: none;
-o-transition-property: color;
-webkit-transition-property: color;
-moz-transition-property: color;
transition-property: color;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
a:hover
{
color: #2d6ca8;
text-decoration: underline;
}
#wrapper
{
width: 940px;
margin: 0 auto;
}
#header
{
height: 90px;
position: relative;
}
.navigation ul
{
position: absolute;
bottom: 0;
right: 0;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.navigation ul li
{
float: left;
display: inline;
position: relative;
text-align: center;
}
.navigation ul li img
{
position: absolute;
bottom: 0;
}
.navigation ul li a
{
color: #fff;
padding: 0 13px;
display: block;
line-height: 35px;
background: #234A7A;
background: -moz-linear-gradient(bottom, #234A7A, #26528D);
background: -webkit-gradient(linear, left bottom, left top, from(#234A7A), to(#26528D));
border-top: 1px solid #4871b0;
border-left: 1px solid #3f6299;
border-right: 1px solid #1b3a5f;
border-bottom: 1px solid #000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
font-size: 1.083em;
}
.navigation ul li:first-of-type a
{
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
.navigation ul li:last-of-type a
{
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
.navigation ul li a:hover, .navigation ul li:hover a
{
background: #26528D;
background: -moz-linear-gradient(bottom, #26528D, #436A9A);
background: -webkit-gradient(linear, left bottom, left top, from(#26528D), to(#436A9A));
text-decoration: none;
}
.navigation .sub
{
display: none;
position: absolute;
top: 36px;
left: 0;
bottom: auto;
right: auto;
width: 180px;
text-align: left;
z-index: 100;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.navigation .last .sub
{
right: 0;
left: auto;
}
.navigation .sub li
{
float: none;
}
.navigation li .sub li a
{
border: none;
background: #26528D;
border-top: 1px solid #3f6299;
border-bottom: 1px solid #1b3a5f;
text-align: left;
}
.navigation li .sub li:first-of-type a
{
border: none;
border-bottom: 1px solid #1b3a5f;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.navigation li .sub li:last-of-type a
{
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border: none;
border-top: 1px solid #3f6299;
}
.navigation li .sub li a:hover, .navigation li .sub li:hover a
{
background: #26528D;
background: -moz-linear-gradient(bottom, #234A7A, #537A9A);
background: -webkit-gradient(linear, left bottom, left top, from(#234A7A), to(#56729D));
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="navigation">
<ul>
<li><a href="m1.html">M1</a>
<ul class="sub">
<li><a href="m1_1.html">M1_1</a></li>
<li><a href="m1_2.html">M1_2</a></li>
<li><a href="m1_3.html">M1_3</a></li>
</ul>
</li>
<li><a href="m2.html">M2</a>
<ul class="sub">
<li><a href="m2_1.html">M2_1</a></li>
<li><a href="m2_2.html">M2_2</a></li>
<li><a href="m2_3.html">M2_3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
最佳答案
工作示例:http://jsfiddle.net/Xjj5W/5/
只需将 .navigation .sub { 替换为 .navigation:hover .sub { 并将 display:none 更改为 display: block .. 添加一个display:none 到.sub
.sub {
display: none;
}
.navigation:hover .sub {
display: block;
position: absolute;
top: 36px;
left: 0;
bottom: auto;
right: auto;
width: 180px;
text-align: left;
z-index: 100;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
关于html - css 下拉菜单不起作用但之前工作过，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10852981/