Javascript jQuery导航下拉菜单未显示。。。有什么想法吗？

目前正在开发一个包含jQuery下拉导航菜单的网站。但是，当我将鼠标悬停在父链接上时，下拉列表没有显示在其他元素的顶部，这是一个问题。。。我认为这是一个很明显的z指数问题，但我已经被难倒了一段时间，所以任何帮助都将不胜感激

HTML

<div class="navigation">

<ul>
    <li><a href=\"index.php\">Link 1</a></li>
    <li><a href=\"#\">Parent 1</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
</ul>

</div>

jQuery

$(document).ready(function() {

    $(".navigation ul li").hover(function() {

        $(this).find("ul").stop().fadeToggle(400);

    })

});

注意：我包括jQuery只是为了以防万一，但我已经测试过了，它确实会根据需要淡入/淡出导航元素

---

任何人有什么想法吗？

'navigation'类的代码如下，没有'overflow-y'，'overflow-x'

.navigation {
      position: relative;
      background-color: #4F4F4F;
      width: 100%;
      min-width: 910px;
      box-shadow: 0px 2px 3px rgba(0,0,0, .4);
      z-index: 10;
      /* overflow-y: hidden; */
      /* overflow-x: auto; */
      height: auto;
    }

---

好吧，如果你还不知道的话，可以用纯css实现。我知道，但我使用jQuery还有其他原因。感谢大家提醒@sdcri需要溢出，还有其他方法吗？通过“display:flex”更改溢出，它将像溢出一样工作。

.navigation {
      position: relative;
      background-color: #4F4F4F;
      width: 100%;
      min-width: 910px;
      box-shadow: 0px 2px 3px rgba(0,0,0, .4);
      z-index: 10;
      /* overflow-y: hidden; */
      /* overflow-x: auto; */
      height: auto;
    }