菜单栏的子菜单

Question

我创建了一个菜单栏，我在站点地图中的子菜单与主菜单下拉列表一致。我希望子菜单向左或向右，具体取决于屏幕分辨率。 以下是代码：

＆＃13;

＆＃13;

function myFunction() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
       x.className += " responsive";
   } else {
       x.className = "topnav";
   }
}
$(document).ready(function() {
   $('.navbar a.dropdown-toggle').on('click', function(e) {
       var $el = $(this);
       var $parent = $(this).offsetParent(".dropdown-menu");
       $(this).parent("li").toggleClass('open');

       if(!$parent.parent().hasClass('nav')) {
           $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
       }

       $('.nav li.open').not($(this).parents("li")).removeClass("open");

       return false;
   });
});

＆＃13;

body {margin:0;}
.topnav img {
 float: left;  
}

.topnav {
 overflow: hidden;
 background-color: white;
}

.topnav a {
 float: left ;
 display: block;
 color: #5A5A5A;
 text-align: left;
 padding: 20px 20px;
 text-decoration: none;
 font-size: 20px;
 font-family:"Oswald";
 letter-spacing: 1.8px;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.topnav a:hover .dropdown-content {
   display: block;
}
.dropdown-content2 {
   display: none;
   position: relative;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.topnav a:hover .dropdown-content2 {
   display: block;
}
.topnav .icon {
 display: none;
}

#logo {
 line-height: 0;
 width: 30%;
}
#logo img {
 width: 60%;
 height: auto;
}
#restofheader {
 display: table-cell;
 vertical-align: middle;
 text-align: left;
}
.menu a:hover, a:active
{
text-decoration: none;

}
.active, a.active
{
color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
 <div id="logo"> <a href=""><img src="logo.png"></a></div>
    <div id="restofheader">
    <img src="images/blank.png" style="width: 20%; height: 10% ">
   <a href="index.html">Home</a>
   <a  href="awards.html">Awards</a>
   <a href="inthenews.html">News</a>
   <a  href=""> <span> Site Map </span>
   
   <div class="dropdown-content">
   <span>(Home) >></span>
   <div class="dropdown-content">
   <p>1 >></p>
   <p>2 >></p>
 </div>
     <p>Facebook >></p>
     <p>Twitter >></p>
     <p>In The News >></p>
     <p>Contact Us >></p>
 </div>

＆＃13;

＆＃13;

＆＃13;

由于我创建的子菜单，js文件不响应屏幕。 非常感谢您的帮助：）