0

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

1 回答 1

0

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

于 2014-02-18T04:49:43.783 回答