移动导航下拉列表未排队

Question

我正在使我的网站响应，当我移动到移动版本时，我的导航栏发生了变化，但现在我正在努力解决导航中的下拉菜单问题。当我将鼠标悬停在垂直菜单“Tours”下拉列表的左侧时，我想要下拉列表 移动导航版本悬停在下拉列表上

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

/*hide all list items, except for the first one ("Home"). 
Show the list item that contains the link to 
open and close the topnav (li.icon) */
.Menu li:not(:first-child)
{
display:none;
border-bottom:none;
}

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

/* The "responsive" class is added to the Menu with JavaScript 
when the user clicks on the icon. This class makes the Menu look good 
on small screens */
.Menu.responsive
{
position:relative;
}

.Menu.responsive li.icon
{
position:absolute;
right:0;
top:-4px;
border:none;
}

.Menu.responsive ul li.icon a
{
border-bottom:none;
}

.Menu.responsive li
{
float:none;
display:inline;

}

.Menu.responsive li a
{
display:block;
text-align:left;
background-color:#161616;
border-bottom:solid 1px #FFFFFF;
}

/* The container <div> - needed to position the dropdown content */
.dropdown
{
position:relative;
display:inline-block;
}

/*Dropdown arrow for link items*/
.caret
{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-menu
{
position:absolute;
visibility:hidden;
min-width: 100px;
background-color: #161616;
opacity:0;
-webkit-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
transition:opacity 0.4s ease-in-out;
}

/* links inside the dropdown*/
.dropdown-menu a 
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top:solid 1px #FFFFFF;
margin-top:0px;

}

/* Change color of dropdown links on hover */
.dropdown-menu a:hover 
{
color: #755378;

}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu 
{
visibility:visible;
right: auto;
left: 0;
opacity:1;

}

<div class="Menu"><!--Nav-menu-->
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li class="dropdown">
        <a class="DropDown-toggle" data-toggle="dropdown" href="#">Tours <span class="caret"></span></a>
     <ul class="dropdown-menu">
        <li><a href="#">Tours</a></li>
        <li><a href="#">Day Tours</a></li>
     </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    <li class="icon"><a href="javascript:void(0);" onClick="myFunction()">&#9776;</a></li> 
</ul>
</div><!--End Nav-menu-->

我添加了Javascript用于外部目的而不是实际需要这只是为了使菜单响应。

Css来自我的移动版CssResponsive样式表。