css - 调整大小后响应菜单无法点击链接

Question

我只使用 css 制作响应式导航菜单。

我有调整屏幕大小后显示菜单的工具菜单按钮。

问题：

当我单击菜单向下滚动并调整屏幕宽度时，（更宽和向后）菜单不可点击。

JSFIDDLE：

http://jsfiddle.net/mikehudak/bU8RW/

我的目标是实现这个菜单，但只有 CSS！ （js菜单链接）

CSS：

/* TOGGLE */

#slidebox {
    position: relative;
    padding: 0;
    margin: 0;
}

#toggle {
    display: none;
    text-align: left;
    height:30px;
    width: 14px;
    padding: 0 12px 0 12px;
    position:relative;
    z-index: 2;
    background: lightcoral;
}

@media screen and (max-width: 640px) { 
    #toggle {
        display: block !important;
    }
}

#toggle a { 
    position: absolute;
    text-decoration: none;
    line-height: 30px;
    font-size: 16px;
}

#box {
    padding: 0;
    margin: 0;
    display: block !important;
    position: absolute;
    top: calc(100%);
    right: calc(100%-30px);
    width: 100%;
}

@media screen and (max-width: 640px) { 
    #box {
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: calc(100%);
        right: calc(100%-30px);
        min-height: 100%;
        display: block !important;
    }
}

#slidebox:target #box {
    opacity:1;
    min-height: 100%;
    width: 100%;
}

#slidebox:target .top { 
    opacity:0;
    pointer-events: none;
}

Answer 1

这是基于 jquery 的多下拉菜单

http://jsfiddle.net/cancerian73/AxWwG/

.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}