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

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