ChromeとSafariで正常に機能するドロップダウンメニューがありますが、FirefoxとIEでテストするとドロップダウンボックスが長くなり、到達できなくなります。FirefoxとIEでドロップダウンメニュー
<!--produkter dropdown -->
<div id="dropmenu1" class="dropmenudiv">
<a href="raw_frames.php">RAW Frames</a>
<a href="project321.php">PROJECT 321</a>
<a href="camsports.php">CAMSPORTS</a>
<a href="foss.php">FOSS</a>
</div>
<!--medie dropdown -->
<div id="dropmenu2" class="dropmenudiv" style="width: 113px;">
<a href="testride.php?id=100">TEST RIDE</a>
<a href="howto.php">HOW TO</a>
<a href="riders_view.php">RIDERS VIEW</a>
</div>
.dropmenudiv{
position: absolute;
margin-top: 36px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 12px;
font-weight: bold;
line-height: 26px;
z-index: 100;
background: -moz-linear-gradient(top, #424141, #262626); /* Mozilla */
background: -webkit-gradient(linear, left top, left bottom, from(#424141), to(#262626)); /* Chrome-Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#424141', endColorstr='#262626'); /* IE */
width: 137px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 5px;
padding: 2px 0;
text-decoration: none;
color: black;
padding-left: 5px;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{
background: -moz-linear-gradient(top, #545454, #2c2c2c); /* Mozilla */
background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#2c2c2c)); /* Chrome-Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#545454', endColorstr='#2c2c2c'); /* IE */
}
は、私はネットの周りにたくさん読んでいると、他の多くの人々は、FirefoxはChromeと他のブラウザではとdivの同じ場所を示すないで同様の問題を抱えていることがわかります。
が私を助けてください、これが急務となっている:)
Firefoxの場合でもメニューのトップが少し下がっています。 .dropmenudivクラスには、36pxの不要な余白があります。これを削除すると、サブメニューがメニューの近くに表示され、サブメニューの上にマウスを置くことができました。 – rajkamal
.dropmenudivの余白部分を簡単に削除してFirefoxで動作させることはできますが、Chromeでは動作しません。 – NizeGuy