我的下拉菜单中的链接不起作用答案

【问题标题】：The links in my drop down menu are not working我的下拉菜单中的链接不起作用
【发布时间】：2020-11-10 04:16:36
【问题描述】：

我是 jquery、html 和 css 的新手。当我尝试在下拉菜单中链接到另一个页面时，链接不起作用。我使用 jquery 作为下拉菜单，它的工作方式就像我希望它工作一样，不确定可能是什么问题？

错误不在于下拉菜单，而在于我的 a href 中的链接，当您单击它们时它们不起作用。 css

nav#menu {
float: right;
margin-right: 150px;
}

nav#menu #menu-nav {
margin: 0;
padding: 0; 
}

nav#menu #menu-nav li {
list-style: none;
display: inline-block;
}

nav#menu #menu-nav ul li a{
background: black;
width: 250px;
}

nav#menu #menu-nav li a {
color: #DE5E60;
font-size: 18px;
font-weight: 300;
line-height: 60px;
display: block;
padding-right: 1cm;
text-transform: uppercase;
}

nav#menu #menu-mav ul ul li{
  padding-right: 1cm;
}

nav#menu #menu-nav li a:hover {
color: #FFFFFF;
}


nav#menu ul ul{
position:absolute;
width:400px;
display:none;
}

nav#menu ul ul li{
display:block;
background:#252525;
}

html

<header>
   <div class="sticky-nav">
      <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
    <div id="logo">
    <a href="#projects">
        <img alt="" src="pictures/Logo.jpg" width="157px"   height="114px">
    </a>
    </div>

<nav id="nav">
    <nav id="menu">
        <ul id="menu-nav">
            <li><a href="#projects">Links</a>
                <ul>
                    <li><a href="https://www.google.com/">google</a></li>
                    <li><a href="https://www.yahoo.com/">yahoo</a></li>
                    <li><a href="link1.html">Link 1</a></li>
                    <li><a href="link2.html">Link 2</a></li>
                </ul>
            </li>
            <li><a href="#Services">Services</a>
                <ul>
                    <li><a href="https://www.google.com/">google</a></li>
                    <li><a href="https://www.yahoo.com/">yahoo</a></li>
                    <li><a href="link1.html">Link 1</a></li>
                    <li><a href="link2.html">Link 2</a></li>
                </ul>
            </li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About Us</a></li>
        </ul>
    </nav>
</nav>
</div>

jquery

<script type="text/javascript">
 $(document).ready(function() {

   $("#menu ul li").on('mouseover',function() {
    $(this).find("ul").stop().slideToggle(400);
   });

    $("#menu ul li").on('mouseout',function() {
    $(this).find("ul").stop().slideToggle(400);
   });  
 });
</script>

【问题讨论】：

我们不喜欢玩“在堆栈跟踪中查找错误”，请更具体！什么不起作用？你做了什么调试？
在 chrome 中为我工作，但由于 iframe 问题，jsfiddle 和 chrome 不允许我点击 google 和 yahoo jsfiddle.net/mplungjan/h56xwrwo
我正在运行 chrome，这一切都适用于服务下拉菜单。不知道是什么问题。
在这里和在 jsfiddle 中都可以正常工作...
问题是当你点击链接时你会被重定向到页面。

标签： javascript jquery html css

【解决方案1】：

你可以试试：

ul, ul li {
    pointer-events:none;
}
a {
    pointer-events:auto;
}

【讨论】：

【解决方案2】：

我发现 2 个不同的问题导致我的链接在网页上不起作用：

如果我使用谷歌浏览器下载一个网页（这样我可以对页面进行逆向工程），文件的前3行如下（我不知道为什么我不能得到第一行这个 HTML 代码出现在突出显示的框中，所以我最后不得不在

<!--  saved from url=(0116)https://www.imdb.com/ ... other stuff ...  -->

<html lang="en-US">

当您从互联网下载网页时，谷歌浏览器会在第二行插入评论，以便您知道网页的来源。现在，为此做好准备，导致链接不起作用的是第二行...... COMMENT！

如果您在页面顶部有评论，并且如果您删除了评论，那么链接（在 HTML 文件的

下方）将神奇地开始工作。

我看到以下代码导致链接无法正常工作：

...

<div class="main">

    ... various other HTML code ...

<a href="https://www.youtube.com/watch?v=0WxdcL_hBxU">

    <img src="thumbnail-photo.jpg">

</a>

</div>

...

CSS 代码：

.main { 
    ... various css code ...

    z-index=-1; 
}

在此示例 2 中，我编写了允许您单击图像的代码，然后您将被重定向到 YouTube 视频。导致链接不起作用的原因是 CSS 代码：z-index=-1

如果将值更改为 z-index=0，则链接将正常工作。

【讨论】：