可在移动设备上使用的 CSS 下拉菜单答案

【问题标题】：CSS Drop down menu that will work on mobile可在移动设备上使用的 CSS 下拉菜单
【发布时间】：2013-10-24 00:40:56
【问题描述】：

想知道是否有人有适用于移动设备的下拉菜单解决方案。该计划是最终重做整个网站以使其对移动设备友好，但目前并非如此，并且下拉菜单不适用于移动设备。您不能选择任何链接，无论是父链接还是子链接。现场直播可见 www.cabletv.com

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;}

【问题讨论】：

你有没有想过使用 :active 而不是 :hover 来触发可见性/显示属性？
@ShyloHana 我确实尝试过 - 它没有任何区别。单击导航项会打开下拉菜单，但单击主导航项或任何子项实际上都不会激活指向新页面的链接
这似乎很受欢迎：osvaldas.info/…
@ShyloHana 我一直在尝试那个，问题是如果您查看实时站点上的下拉菜单，我需要使子菜单链接水平显示而不是堆叠显示，并且我不要相信这将与 osvaldas 解决方案处理移动下拉菜单的方式一起使用。
这太糟糕了。仅查看“相关”链接，这似乎是一个通常没有答案的问题。最近这件事一直吸引着我，因为如果我想让任何东西对移动设备友好，该怎么做

标签： css mobile drop-down-menu

【解决方案1】：

一个非常简单的解决方案是为移动菜单使用选择菜单。基本上你必须使用选择标签而不是 ul 来复制你的菜单，用 display:none 隐藏它，然后根据用户的设备使用媒体查询来显示适当的菜单。然后，您需要添加一些 javascript 以在选择链接时激活链接。查看http://css-tricks.com/convert-menu-to-dropdown/ 了解如何操作。它极大地帮助了我 - 诚然不如正确的下拉菜单漂亮，但适用于移动设备！

【讨论】：