2011-12-20 11 views
0

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の同じ場所を示すないで同様の問題を抱えていることがわかります。

が私を助けてください、これが急務となっている:)

+0

Firefoxの場合でもメニューのトップが少し下がっています。 .dropmenudivクラスには、36pxの不要な余白があります。これを削除すると、サブメニューがメニューの近くに表示され、サブメニューの上にマウスを置くことができました。 – rajkamal

+0

.dropmenudivの余白部分を簡単に削除してFirefoxで動作させることはできますが、Chromeでは動作しません。 – NizeGuy

答えて

0

属性位置:絶対的な原因この問題。代わりにこのコードを使用してください。

http://jsfiddle.net/AAgfF/2/

+0

提供されたリンクでコードを試してみると、ドロップダウン・エフェクトが表示されません。 – NizeGuy

+0

このメニューはこのサイトで正常に動作しています.http://campora.org/。必要なjsはbizj_menu.jsだけです。これを試して。 – designersvsoft

関連する問題