基於CSS的下拉菜單不顯示iOS設備

我有一個網站的下拉菜單，在桌面瀏覽器上效果很好，但不適用於iPad或iPhone設備。然而，它的工作，但在Android設備上的作品。我有一個具有相同導航結構的類似網站，它在該網站上完美運行。基於CSS的下拉菜單不顯示iOS設備

URL是www.aiimconference.org。這裏是一個導航結構和CSS的示例。另外這裏是工作完美的網站。我一直在這個網站上使用相同的確切結構。 www.aiim.org。

<ul> 
<li><a href="/conference">Home</a></il> 
<li class="expandable"><a href="/conference">Program</a> 
    <ul> 
     <li class="expandable"><a href="/conference">Program</a></il> 
     <li class="expandable"><a href="/conference">Program</a></il> 
    </ul> 
</il> 
<li class="expandable"><a href="/conference">Connect</a></il> 
<li class="expandable"><a href="/conference">Register</a></il> 
<li class="expandable"><a href="/conference">Sponsors</a></il> 
<li class="expandable"><a href="/conference">Venue</a></il> 
</ul> 


.mainNav li.expandable > a /* dropdown */{ 
    background: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/dropdown.jpg") no-repeat center right; 
    padding-right: 16px; 
    padding-bottom: 4px;} 

.mainNav ul li.expandable li.expandable > a /* flyout */ { 
    background-image: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/flyout.png") !important; 
    background-repeat: no-repeat; 
    background-position: 95% 50%; 

. mainNav{ 
    margin: 0 auto; 
    text-align: center; 
    background: #007287 url(/assets/sites/aiimconference/www/conf2013/images/layout/main- nav-bkgd.jpg) repeat-x bottom; 
    font-family: franklin-gothic-urw-condensed, arial, sans-serif; 
    font-size: 20px; 
    line-height: 20px; 
    text-transform: uppercase; 
    margin-top: 30px; 

.mainNav ul ul li:hover > a { 
    background-color:#006372;} 

.mainNav span { 
    display:block; 
    position:absolute; 
    right:9999px; 
    top:-35px;} 

.mainNav ul li:hover > ul { 
    left:-1px; 
    top:30px; 
    z-index:-1;} 
.mainNav ul ul li:hover > ul { 
    left:100%; 
    top:auto; 
    margin-top:-31px; /*margin-left:-10px;*/ 
    z-index:10;}

來源

2012-10-01 Wayne

除非我老了，沒有什麼會使菜單飛出，所以無論是有更多的CSS和/或JS。 –

@RyanB yup有點懸停風格等。 –

對不起，我知道我錯過了那個meun的一些代碼。致力於讓你們看到這一切。如果您想查看www.aiimconference.com網站並使用螢火蟲或Chrome開發工具，請參閱所有樣式和結構。 – Wayne

我無法證實這一點，但我想，如果不是使用左側定位到隱藏下拉導航您改用

visibility: hidden; 
height: 0; 
opacity: 0;

隱藏它和

visibility: visible; 
height: auto; 
opacity: 1;

展示它，它應該與移動Safari和移動鉻合作。

來源

2012-10-02 12:13:54

Magnus是正確的，這個開關將使它在'iOS'上工作。你也可以從'display：none;'去'display：whatever;'。看看[這篇文章]（http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/）以獲得更完整的解釋。 – jmeas

使用display的唯一問題：none/block;就像@jmeas所暗示的那樣，CSS轉換或JS動畫無法工作。除此之外，它應該完美地工作。 –

據我所知，您不應該在移動設備上使用「懸停」CSS選擇器，因爲這是由光標觸發的，您沒有，因爲您沒有鼠標。你可以嘗試點擊並按住，但我不確定。

解決這個問題的更好的方法是使用媒體查詢來顯示並使其僅在移動設備上以某種方式發揮作用。我建議你通過點擊父項來觸發下拉菜單，或者以不同的方式顯示菜單（使用已打開的子菜單或類似的東西）。

來源

2012-10-15 20:35:53

基於CSS的下拉菜單不顯示iOS設備

回答

相關問題