链接无法点击;没有悬停，或任何东西

Question

我的推送菜单有点问题。

以下是我的菜单HTML代码：

<nav id="menu">
<a href="#menu" class="menu-link">Text</a>
<ul>
    <span style="vertical-align:middle;">Pyronobic <img src="pyronobic-logo-v2.png" style="height: 16px; width: 16px;" /></span>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>

问题是，无法点击.menu-link链接，我不知道为什么。

这是我的CSS：

.menu-link {
    position: absolute;
    top: 15px;
    left: -50px;
    height: 35px;
    width: 35px;
    background: no-repeat;
    background-image: url(Assets/menu.svg);
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: 50%;
    background-color: rgba(255,255,255,0.3);
    background-position: center center;
    z-index: 99;
    opacity: 0.9;
    -webkit-transition: opacity 0.15s ease;
    -moz-transition: opacity 0.15s ease;
    -o-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

这是我的jQuery：

$(".menu-link").click(function() {
    $("#menu").toggleClass("active");
    $(".container").toggleClass("active");
});

menu.active CSS：

#menu.active {
-webkit-transform: translate(-13.755em, 0px);
-moz-transform: translate(-13.755em, 0px);
-o-transform: translate(-13.755em, 0px);
-ms-transform: translate(-13.755em, 0px);
transform: translate(-13.755em, 0px);
}
.container.active {
 -webkit-transform: translate(-13.725em, 0px);
 -moz-transform: translate(-13.725em, 0px);
 -o-transform: translate(-13.725em, 0px);
 -ms-transform: translate(-13.725em, 0px);
 transform: translate(-13.725em, 0px);
}

之前我已经通过Nav标签的链接OUT测试了它，但是当它在导航标签内时，它似乎不起作用......

提前感谢您的帮助！

jsFiddle Link

Answer 1

<强>替换

<a href="#menu" class="menu-link"></a>

。通过

<a href="#menu" class="menu-link">Some Text</a>

Answer 2

您的财产左侧已分配-50px。可能是这个原因造成的。你需要处理职位。

像打击一样涂抹你的css。

.menu-link {
position: absolute;
top: 15px;
left: 50px;
height: 35px;
width: 35px;
background: no-repeat;
background-image: url(Assets/menu.svg);
background-position-x: 50%;
background-position-y: 50%;
background-size: 50%;
background-color: rgba(255,255,255,0.3);
background-position: center center;
z-index: 99;
opacity: 0.9;
-webkit-transition: opacity 0.15s ease;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}

http://jsfiddle.net/7jYN2/1/