CSS下拉菜單，將在手機上工作

想知道是否有人有一個下拉菜單的解決方案，將在移動工作。該計劃最終將重做整個網站，使其移動友好，但目前還沒有，並且在移動設備上不起作用。您無法選擇任何鏈接，父母或子女。現場直播可以在www.cabletv.com可以看出CSS下拉菜單，將在手機上工作

縮短HTML版本：

<ul id='nav'> 
<li><a href='/digital-cable' id='tv'>TV</a> 
    <ul> 
     <li><a href='/comcast/cable-tv'>Comcast</a></li> 
     <li><a href='/charter/cable-tv'>Charter</a></li> 
     <li><a href='/cox/cable-tv'>Cox</a></li> 
     <li><a href='/time-warner/cable-tv'>Time Warner</a></li> 
    </ul> 
</li> 
<li><a href='/internet' id='internet'>Internet</a> 
    <ul> 
     <li><a href='/comcast/internet'>Comcast</a></li> 
     <li><a href='/charter/internet'>Charter</a></li> 
     <li><a href='/cox/internet'>Cox</a></li> 
     <li><a href='/time-warner/internet'>Time Warner</a></li> 
    </ul> 
</li> 
</ul>

CSS：

ul#nav{position: absolute; top: 0px; right: 0px; margin: 0px; padding: 0px;} 
ul#nav li {display: block; float: left; position: relative; margin: 0px; padding: 0px;} 
ul#nav li a{display: block; float: left; height: 67px; font-size: 14px; text-transform: uppercase; color: #5d5d5d; text-decoration: none; padding: 13px 0px 0px; background: url(../images/cabletv/new/generic/nav-sprites.png) no-repeat 0px 0px; text-align: center; position: relative; border-top: 5px solid #fff;} 

ul#nav li:hover{background-color: #f2f2f2;} 
ul#nav li a:hover, ul#nav li:hover a {border-color: #f2f2f2;} 

ul#nav,ul#nav li,ul#nav ul { list-style: none; margin: 0; padding: 0;} 

ul#nav li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; position: relative;} 

ul#nav li.hover,ul#nav li:hover { position: relative; z-index: 599; cursor: default;} 

ul#nav ul { visibility: hidden; position: absolute; top: 100%; left: -40px; z-index: 598; width: 470px; background: rgba(255,255,255,0.9); -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-left: 30px;} 

ul#nav ul li { display: block; float: left;} 
ul#nav ul li:hover{background: none;} 
ul#nav ul li a, body._404 ul#nav ul li a{background: none; display: block; float: left; height: auto; padding: 15px 25px; text-transform: none; border: none;} 
ul#nav ul li a:hover{background: none; color: #ff6947;} 
ul#nav ul ul { top: 1px; left: 99%;} 
ul#nav li:hover > ul { visibility: visible;} 
ul#nav li.rtl ul { top: 100%; right: 0; left: auto;} 
ul#nav li.rtl ul ul { top: 1px; right: 99%; left: auto;}

來源

2013-10-16 Molly Campbell

你有沒有想過使用：主動而不是：懸停觸發可見性/顯示屬性？ –

@ShyloHana我確實嘗試過 - 它沒有什麼區別。點擊導航項目打開下拉菜單，但是沒有點擊主導航項目或任何子項目實際上激活到新頁面的鏈接 –

這似乎是相當受歡迎的：http：//osvaldas.info/drop-down-導航響應和觸摸友好 –

一個非常簡單的解決方法是使用一個選擇菜單移動菜單。基本上，您必須使用選擇標籤而不是ul複製菜單，使用display：none隱藏它，然後使用媒體查詢根據用戶的設備顯示相應的菜單。然後，您需要添加一點JavaScript以在選擇鏈接時激活鏈接。檢查出http://css-tricks.com/convert-menu-to-dropdown/如何做到這一點。它非常幫助我 - 雖然不像下拉菜單那麼漂亮，但對移動設備非常有用！

來源

2014-02-18 04:49:43

CSS下拉菜單，將在手機上工作

回答

相關問題