如何在没有Bootstrap的现有响应式菜单中添加响应式下拉菜单？

Question

您好我已经创建了一个响应式菜单，在滚动时变得粘滞。一切都很完美，但我无法添加任何链接的下拉链接。 Most tutorials我发现这些内容并不准确，反应灵敏，无法真正帮助我修改my existing responsive menu。

以下是我现有的响应式菜单中使用的代码

的CSS

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin:0 auto; /* pour centrer le menu */
    padding: 0;
    overflow:hidden;

    background-color: #FFF;
    text-align: center;
    width:1400px; /* pour centrer le menu */
    max-width:100%;
    max-width:100%;  
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #0071a6;
    text-align: center;

    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    transition: all .2s ease-in-out;
    width:185px; /* Pour centrer le menu */
}

/* Change background color of links on hover */
ul.topnav li a:hover {
    background-color: #0071a6; 
    color:#FFF;
    transform: scale(1.1);
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}


/*
##############################################################################
Add media query
*/

@media screen and (max-width:768px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }

    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }

    ul.topnav li a {
        width:auto;  
    }

    ul.topnav {
        width:auto;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 

Normalement @media screen and (max-width:768px) 

*/
@media screen and (max-width:768px) {
    ul.topnav.responsive {
        position: relative;
    }

    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    ul.topnav.responsive li {
        float: none;
        display: inline;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }

    ul.topnav li a {
        width:auto;  
    }

    ul.topnav {
        width:auto;
    }
}

/*

Pour le menu sticky
*/


.menu {
}

.menu-padding {
    padding-top:0px;
}

.sticky {
    position:fixed;
    top:0;
    z-index:1;
    overflow:hidden;
}

.sticky ul.topnav {
    background-color:#0071a6;
    border-bottom: 1px solid #666;

    /*
    border: 1px solid #FFFFFF;
    */
}

.sticky ul.topnav li a {
    color:#FFF;
}

Javascript和Jquery

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

/*
Jquery to make the menu sticky on scroll
*/

$(document).ready(function () {
    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('sticky');
            $('.content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('sticky');
            $('.content').removeClass('menu-padding');
        }
    }

    document.onscroll = scroll;
});

HTML

<div class="menu">
  <ul class="topnav">
    <li><a href="#home">HOME</a></li>
    <li><a href="#news">WHO WE ARE </a></li>
    <li><a href="#contact">WHAT WE DO</a></li>
    <li><a href="#about">BLOGS</a></li>
    <li><a href="#about">GET INVOLVED</a></li>
    <li><a href="#about">JOBS</a></li>
    <li><a href="#about">CONTACT US</a></li>
    <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
  </ul>
</div>

问题

即使我在菜单中添加新的Ul，我也没有获得下拉菜单？如何在不使用引导程序的情况下向任何链接添加响应式下拉菜单？