调整大小后，响应式菜单无法单击链接

Question

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

调整大小屏幕后，我有toogle菜单按钮显示菜单。

问题：

当我点击菜单向下滚动并调整屏幕宽度时，（宽屏和背面）菜单无法点击。

的jsfiddle：

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

我的目标是实现此菜单，但仅限CSS！ ( js menu link)

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