0

こんにちは、SOで私の最初の質問を読んでくれてありがとう。

私はhttp://www.theacoutlet.comの管理者であり、いくつかのコンテンツページを追加しています。真ん中のナビゲーションから1つの要素を取りました。バー(「FINDPRODUCTS」)を選択し、ホバー時にCSSを介してドロップダウンにします。

CSS(下記)が検証されました。

問題は、このサブメニューがFirefox、IE、Chromeで3つの異なる方法で表示されるようになったことです。それは私にはそれほど複雑ではないように見え、私は困惑しています。IEではまったく表示されません。もちろん、ほとんどのお客様はIEを使用しています。

IE:ホバー時にサブメニューがまったく表示されません。

Firefox:サブメニューが表示され、上部に奇妙なリストアイテムの箇条書き(HTMLではありません!)が表示され、メニューは元の「FINDPRODUCTS」テキストの上に表示されます。

Chrome:サブメニューは完全に表示されますが、唯一の問題は、新しいアイテムにカーソルを合わせようとすると非常に簡単に消えることです...メニューが消えないようにするには、非常に高速で正確なマウスの動きが必要です。

コードは以下のとおりです。読んでくれてありがとう、そしてあなたの助けに感謝します!

HTML:

<div class="menisell2">


<a href="search.php" class="menisell2">FIND PRODUCTS</a> <img src="images/de_26.jpg" width="1" height="22" border="0" align="middle"> 

<span class="menisell2content">

<a href="search.php"><br>SEARCH</a><br><br>

<a href="products1.php">COOLING</a><br><br>

<a href="products2.php">HEAT PUMP</a><br><br>

<a href="products3.php">DUAL FUEL</a><br><br>

<a href="products4.php">GAS HEAT</a><br><br>

<a href="products5.php">MINI SPLITS</a><br><br>

<a href="products6.php">PACKAGE UNITS</a><br><br>
</span>

</div>

CSS:

.menisell2, .menisell2 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    display: inline;
    position:relative;
}

.menisell2 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.menisell2content a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.menisell2:hover  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #CE252C;
    text-decoration: none;
} 

.menisell2 a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}


.menisell2content a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #4682B4;
}

.menisell2content a:hover  {

color: #CE252C;

}

.menisell2:hover .menisell2content{

visibility:visible;


}

.menisell2content{
visibility:hidden;
position:absolute;
width:100%;
display:list-item;
font-size: 12px;
color: #FFFFFF;
background-color: #4682B4;
}
4

0 に答える 0