2016-03-23 7 views
1

私は奇妙な問題を抱えています。私がコーディングしているサイトの1つでは、css hoverコマンドを使用してボタンにプルダウンメニューを添付します。ご存じのように、モバイルデバイスでは、ホバーコマンドがタップに変換されます。問題は、私が何をしても、iOSのサファリにクリックを登録することができず、iOSのサファリだけでドロップダウンメニュー全体をアクセスできなくなることです。それはiPhoneのクロムで動作し、すべてのデスクトップブラウザで動作します。何か案は?:Hover CssメニューはiOS Safariでのみ開きません。

これは私のCSSです:

/* Reserve Pull Down */ 

.reserve { 
    font-size: 30px; 
    color: white; 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    margin: 30px; 
} 

.reservetitle{ 
    color: white; 
} 

.reservedropdown { 
    display: none; 
    position: absolute; 
    background-color: white; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
} 

.reserve:hover .reservedropdown { 
    display: block; 
} 

.reserve.active .reservedropdown { 
    display: block; 
} 

/*準備が終わり*/

をプルダウンし、これは私のhtmlです....

<div class="reserve"> 
     <a class="reservetitle">Reserve</a> 
      <div class="reservedropdown"> 
       <a class="dropdowntext" href="reserve/index.html">By Location</a> 
       <div class="dropdowngap"></div> 
       <a class="dropdowntext" href="tel:+13014333005">Call Now</a> 
      </div> 
     </div> 

任意のアイデア?私はそれを理解するのに非常に苦労しています。 Iveは ":active"、 ":focus"を試しました。そしてもちろん、「:ホバー」。 iOSのサファリで何かを手に入れよう。どんな助けもありがとう。 乾杯!確かに私は単に<a class="reservetitle">Reserve</a>href=""を持っていたことを確認しました -Julian

答えて

1

私はそれが少し

http://codepen.io/bjornmeansbear/pen/wGdzMg

あなたHMTLを微調整することにより、仕事を得ることができました... <a href="#" class="reservetitle">Reserve</a>

ブラウザ見ていますあなたがクリック/ホバーするリンクとして、それはすべて正常に動作します。

関連する問題