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

Question

我正在建立一个响应式菜单。这个菜单的更大版本效果很好。这是菜单看起来像扩展的内容：

当页面变小时，菜单消失（在CSS中使用display: hidden;）。 A＆＃34;菜单＆＃34;链接出现在此版本中代替水平菜单。我只是在较大版本的响应式网站中隐藏菜单按钮。

菜单按钮为position: fixed; right: 0;，可将其固定在容器内。我在这个大小的网站上使用了100％的宽度，因此position: absolute; right: 0;甚至不能正常工作，因为它并不确切知道屏幕的宽度。

我的问题是什么：我正在使用jquery来切换在＆＃34;菜单＆＃34;下面打开的垂直菜单。链接。它打开了页面。此外，我不熟悉设置垂直子菜单向左开放，并希望有人可以帮助。我的所有子菜单都向右打开（这会让它再次脱离页面）。

我需要什么：我需要弄清楚如何修复此代码以使＆＃34; parent＆＃34;此垂直菜单的级别浮动到页面右侧，并在＆＃34;菜单下打开＆＃34;链接（使用css或jquery），然后让子元素向左打开而不是向右打开。菜单不需要在页面上下浮动（仅当＆＃34;菜单＆＃34;悬停在＆＃34;时，才会出现垂直菜单....所以如果菜单悬停，垂直菜单需要保持打开状态过了。

提前致谢。我不习惯使用这种风格的菜单。

代码：

HTML：

<a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#">Menu</a>

<div class="nav fixedright">
<ul>
<li class="first"><a href="#">New?</a>
    <ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">What We Believe</a></li>
    <li><a href="#">When and Where</a></li>
    <li><a href="#">Crossroads Staff</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</li>
<li><a href="#">Next Steps</a>
    <ul>
    <li><a href="#">What is Next Steps?</a></li>
    <li><a href="#">Connect</a></li>
    <li><a href="#">Grow</a></li>
    <li><a href="#">Serve</a></li>
    </ul>
</li>
<li><a href="#">Ministries</a>
    <ul>
    <li><a href="#">Childrens Ministry</a></li>
    <li><a href="#">Student Ministry</a></li>
    <li><a href="#">Connect Groups</a>
    <li><a href="#">Music Ministry</a></li>
    <li><a href="#">Prayer Groups</a></li>
    </ul>
</li>
<li><a href="#">Resources</a>
    <ul>
    <li><a href="#">Sermon Archives</a></li>
    <li><a href="#">Church Community Builder</a></li>
    <li><a href="#">Parents</a></li>
    <li><a href="#">Bible Reading Plans</a></li>
    <li><a href="#">Recommended Books</a></li>
    </ul>
</li>
<li class="last"><a href="#">Events</a>
    <ul>
    <li><a href="#">Fall Festival Campout</a></li>
    <li><a href="#">Let's Paint</a></li>
    <li><a href="#">Dinner for 8</a></li>
    <li><a href="#">Calendar of Events</a></li>
    </ul>
</li>
<li><a href="#">Give</a>
    <ul>
    <li><a href="#">How to Give</a></li>
    <li><a href="#">Give Online</a></li>
    </ul>
</li>

</ul>
</div>  <!-- navigation -->

CSS :(对于我希望菜单向右浮动的那个）

#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; }

jquery的：

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