Javascript 如何在网站右侧浮动垂直菜单，并在左侧（而不是右侧）打开子菜单

我正在制作一份反应灵敏的菜单。这个菜单的更大版本效果很好。以下是菜单的外观：

当页面变小时，菜单将使用display:hidden消失；在CSS中。此版本中会出现一个菜单链接，代替水平菜单。我只是将菜单按钮隐藏在响应站点的更大版本中

菜单按钮位置：固定；右：0；将其固定在容器内。我使用100%的宽度在这个大小的网站上很多东西，所以位置：绝对；右：0；甚至不起作用，因为它不知道屏幕有多宽

我的问题是：我使用jquery切换在菜单链接下方打开的垂直菜单。它正在打开这一页。另外，我不熟悉设置垂直子菜单的左侧开口，希望有人能帮我。我所有的子菜单都向右打开，这会使它再次离开页面

我需要的是：我需要找出如何修复这段代码，使垂直菜单的父级浮动到页面的右侧，并使用css或jquery在菜单链接下打开，然后让子元素向左而不是向右打开。菜单不需要在页面上下浮动，垂直菜单仅在菜单悬停在上方时出现……因此，如果菜单也悬停在上方，垂直菜单需要保持打开状态

提前谢谢。我不习惯使用这个样式菜单

代码：

HTML:

jquery：

<script>
$(document).ready(function(){
    $("#menu_button").hover(function(){
    $('.nav').slideToggle();
    });
});
</script>

#header_whitebox #menu_button { position: fixed; right: 0; padding: 20px 15px 25px 15px; }
/* NAVIGATION */
#header_whitebox .nav { display: none; position: absolute; top: 0px; right: 0; height: 75px; }
#header_whitebox .nav ul { font-size: 1em; line-height: 1.2em; list-style: none; display: block; position: absolute; z-index: 100; margin: 0; padding: 0; }
#header_whitebox .nav ul li { float: none; font-size: 13px; margin-left: -1px;  min-width: 100%; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
#header_whitebox .nav ul li a { display: block; text-decoration: none; color: #282828; padding: 10px 11px; white-space: nowrap; text-align: left; text-decoration: none; letter-spacing: 1px;  min-width: 200px; background: #fff;  }
#header_whitebox .nav ul li:hover a { color: #2C59A7; }

/* SUB NAVIGATION */
#header_whitebox .nav li ul { display: none; position: relative; border-top: 1px solid #ccc; }
#header_whitebox .nav li:hover ul { display: block; position: absolute; z-index: 100; margin: 0; padding: 0; }
#header_whitebox .nav li:hover li { float: none; font-size: 13px; margin-left: -1px;  min-width: 75px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
#header_whitebox .nav li:hover li a { display: block; text-decoration: none; color: #282828; padding: 10px 11px; white-space: nowrap; text-align: left; text-decoration: none; letter-spacing: 1px;  min-width: 200px; background: #fff; }
#header_whitebox .nav li:hover li:hover a {  color: #2C59A7; }

<script>
$(document).ready(function(){
    $("#menu_button").hover(function(){
    $('.nav').slideToggle();
    });
});
</script>