基于CSS的响应式多级下拉菜单的解决方案,没有JS依赖项？

Question

我一直在寻找可用的响应式下拉菜单/导航栏,但似乎没有什么工作正常.我主要需要一个基于CSS的菜单,它不依赖于JavaScript hacks.

为什么不使用JS？基于JS的解决方案无法在像Opera Mini这样的代理浏览器上运行,我们的大多数受众使用它,并且Blackberry浏览器不能很好地展示JS的工作.

很多人提倡使用选择菜单进行移动导航.一个有趣的解决方案,但这又取决于JS,并且对于嵌套的多级菜单来说非常繁琐.

那么,您遇到的哪些导航系统可能对您有用？

Answer 1

对于带有java脚本的多级下拉菜单,我在这里创建一个示例.

HTML:

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>?

CSS:

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}
?

Answer 2

移动浏览器通常会在点击时显示/隐藏任何 :hover 内容（如果不是链接）。使用此代码：

HTML：

<ul>
<li id="showhide">I am visible, and can be tapped/hovered.
     <ul id="menu">
          <li>Menu item 1</li>
          <li>Menu item 2</li>
     </ul>
</li>
</ul>

CSS：（无样式）

#showhide{
     position:relative;
}
#menu{
     position: absolute;
     left: -999px
}
#showhide :hover #menu{
     left: 0px;
}

看到这是 JSFiddle： http: //jsfiddle.net/VVqBU/