私はあなたが私を助けることができることを願っています. 以前はすべてのブラウザーで機能していたドロップダウン メニューがありますが、何らかの理由で、今日からドロップダウン サブメニューの表示が停止しました。
様子を見て、何が起こっているのか教えていただけますか？これを理解しようとして、すでに約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>