css：ホバリングがサファリだけに期待されるように動作していない、近いうちにいくつかの回答が見つかりましたが、解決できませんでした。助けてください:)

Question

私は2,3日間フ​​ォーラムを掘り下げて、問題に近い答えを見つけましたが、どれも解決できませんでした。

いくつかのトピックはこの問題に近いので、質問を繰り返すと謝りますが、誰もこの問題を直接処理していないようです。その後

だから私は別の同じ<li>

で <div>

.flowerChoice { 
display: none; 
width:100px; 
height:100px; 
position:relative; 
top:-17px; 
} 

.flowerShow:hover { 
height:100px; 
width:100px; 
} 

.flowerShow:hover div.flowerChoice { 
display: block; 
} 

を表示する<li>で<div>上の簡単なホバーセットを持っているdiv要素の上にHTML

<ul id="navlist"> 
    <li class="" > 
     <a href="store.html"> 
      <img src="./images/nav-spacer.gif" /> 
     </a> 
    </li> 
    <li> 
     <div class="flowerShow"> 
      <a href="#"> 
        <img src="./images/nav-spacer.gif" /> 
      </a> 
      <div class="flowerChoice"> 
       <img usemap="#flowerChoice" border="0" src="images/flowerChoice.png" /> 
       <map name="flowerChoice"> 
        <area shape="rect" coords="2,59,100,76" href="arrangements.html" alt="Flower Arrangements" /> 
        <area shape="rect" coords="0,29,98,46" href="weddings.html" alt="Wedding Flower Arrangements" /> 
       </map> 
      </div> 
     </div> 
    </li> 
    <li class="" > 
     <a href="http://blog.passionflowerdesign.com/" alt="Passionflower Design Blog"> 
      <img src="./images/nav-spacer.gif" /> 
     </a> 
    </li> 
    <li class="" > 
     <a href="contact.html"> 
      <img src="./images/nav-spacer.gif" /> 
     </a> 
    </li> 
</ul> 

あなたのマウス、あなたは、あなたに2つのリンクを与える2番目のdivを取得します。基本的にはドロップダウンです。

すべてのブラウザで、Safari（私はサファリと戦う必要はありませんでした）では、この領域にマウスを置くと、新しいリンクに移動できます。

しかし、サファリでは、あなたがそれらに到達する前に閉じます。

ホバーを<a>と<li>に追加しようとしましたが、コードが完全に破損しています。

これに照らされた光は非常に高く評価されています！

http://www.thetclub.com/test/passionflower/www/index.html

乾杯！

ネイト〜

Answer 1

サファリウィンドウ内の私にとって、この

.flowerShow:hover li { 
height:100px; 
width:100px; 
} 

作品

Answer 2

を試してみてください、あなたがホバー部分とそれに接続されたドロップダウンの間に隙間がありますように聞こえます。おそらくトップをもう少し上に移動しますが、同じように見えるように追加のトップパディングを追加しますか？