下拉菜单无法正常工作或响应

Question

我是新来的＆amp;我正在开发我的第一个移动网络项目。我的下拉菜单有问题。它在徘徊时掉落。但是，它只显示第一个子菜单。菜单的其余部分被冻结。即使我点击菜单的任何其他部分也没有任何反应。感谢以这种方式提供的任何帮助。非常感谢先进。

    This is my menu...


<nav>
    <div id="nav"><!-- #Begin navigation -->
    <div class="dropdown">
    <button class="dropbtn">Menu</button>
    <div class="dropdown-content">

    <ul>
    <ul>
        <li><a href="index.html">HOME</a></li>
    </ul>
    <ul>
        <li>Sauces
        <ul>
        <li><a href="A1_1.html">French</a></li>
        <li><a href="A1_2.html">Italian</a></li>
        <li><a href="A1_3.html">Indian</a></li>
        <li><a href="A1_4.html">Mexican</a></li>
        <li><a href="A1_5.html">Chinese</a></li>
        </ul>
        </li>
    </ul>
    <ul>
        <li>Cheese
        <ul>
        <li><a href="A2_1.html">Swiss</a></li>
        <li><a href="A2_2.html">Danish</a></li>
        <li><a href="A2_3.html">Dutch</a></li>
        <li><a href="A2_4.html">French</a></li>
        <li><a href="A2_5.html">Italian</a></li>
        <li><a href="A2_6.html">American</a></li>
        <li><a href="A2_7.html">Australian</a></li>
        <li><a href="A2_8.html">German</a></li>
        </ul>
        </li>
    </ul>
    <ul>
        <li>Wine
        <ul>
        <li><a href="A3_1.html">California</a></li>
        <li><a href="A3_2.html">Chile</a></li>
        <li><a href="A3_3.html">Argentina</a></li>
        <li><a href="A3_4.html">France</a></li>
        <li><a href="A3_5.html">Germany</a></li>
        <li><a href="A3_6.html">Spain</a></li>
        <li><a href="A3_7.html">Italy</a></li>
        <li><a href="A3_8.html">Portugal</a></li>
        <li><a href="A3_9.html">Australia</a></li>
        <li><a href="A2_10.html">New Zealand</a></li>
        </ul>
        </li>
    </ul>
    <ul>
        <li>Crusine
        <ul>
        <li><a href="A4_1.html">American</a></li>
        <li><a href="A4_2.html">French</a></li>
        <li><a href="A4_3.html">Chinese</a></li>
        <li><a href="A4_4.html">Japanese</a></li>
        <li><a href="A4_5.html">Korean</a></li>
        <li><a href="A4_6.html">Indian</a></li>
        <li><a href="A4_7.html">Indonesian</a></li>
        <li><a href="A4_8.html">Thai</a></li>
        </ul>
        </li>
    </ul>
    <ul>
        <li>Bread
        <ul>
        <li><a href="A5_1.html">American</a></li>
        <li><a href="A5_2.html">French</a></li>
        <li><a href="A5_3.html">British</a></li>
        <li><a href="A5_4.html">Italian</a></li>
        <li><a href="A5_5.html">Mexican</a></li>
        <li><a href="A5_6.html">Indian</a></li>
        </ul>
        </li>
    </ul>
    </ul>
    </div>
    </div>
    </div><!-- #End navigation -->
</nav>


...and this is my CSS...


/* 360 Resolution */

@media (max-width: 360px) {

/* Dropdown Button */

.dropbtn {
    background-color: blue;
    color: white;
    margin-top: 25px;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */

.dropdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
    background-color: orange;
}

.dropdown-content ul li:hover > ul {
    display: block;
    padding-left: 100px;
    left: auto;
}

.dropdown-content li li li {
    margin-left: 1em;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

}