html - 下拉列表中的元素不可点击

Question

我对此事进行了一些搜索，但似乎收到了不同的答案，鉴于我有限的编码知识，我并不完全确定如何解决这个问题。

我下载了一个名为 Brushed 的网站模板，作者是 Alessio Atzeni(提及是为了便于引用)。该模板很棒，但遗憾的是它没有下拉功能，所以我查阅了一些教程并设法创建了自己的模板。

<div class="sticky-nav">
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

    <div id="logo">
        <a id="goUp" href="#home-slider" title="rando"></a>
    </div>

    <nav id="menu">
        <ul id="menu-nav">
            <li class="current"><a href="#home-slider">Home</a></li>
    <li><a href="#intro">Intro</a></li>

            <li class="dropdown"><a href="#services">Our Services</a>
    <ul id="menu-nav-dropdown">
    <li><a href="xxx.html">Social Media</a></li>
    <li><a href="xxx.html">Graphic Design</a></li>
    <li><a href="xxx.html">Development</a></li>

    </ul>

    </li>

    <li><a href="#social-area">Blog</a></li>
    <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

</div>

这是导航栏 index.html 的 HTML，当我将鼠标悬停在“服务”上时，会出现下拉菜单，并且每个单独的元素都会因我悬停而突出显示，但是当我单击它时，什么也没有发生。但是，如果我右键单击并“在新选项卡中打开”，则会生成正确的页面。

我选择不包括 CSS 以防止帖子困惑，但如果您需要任何其他信息，我会很乐意尽快提供。有谁知道问题可能是什么？提前谢谢你。

编辑:这里是 http://jsfiddle.net/tuvon83p/1/它看起来一点都不好，但我相信功能在那里并且工作正常(您只需要将鼠标悬停在右侧即可查看链接，因为没有背景)。

Answer 1

尝试

nav ul li ul li a{
position: relative;
top:0;
left: 0;
z-index: 999;
display: block;
}

基本上:在导航中，定位所有 ul，定位所有 li，定位所有 ul，定位所有 li，然后选择 a，它应该转到不可点击的位置并将其置于所有内容之上。上面可能有东西？