Ссылки в моем выпадающем меню не работают

Question

Я новичок в jquery, html и css. Когда я пытался ссылаться на другую страницу в раскрывающемся меню, ссылки не работают. Я использовал jquery для выпадающего меню, и он работает, как будто я хочу, чтобы он работал не уверен, что может быть проблемой?

Ошибка не в выпадающем меню со ссылками в моем 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> 

Answer 1

вы можете попробовать:

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