javascript - how to float a vertical menu to the right of the website, and open sub-menu's to the left (instead of right) -

javascript - how to float a vertical menu to the right of the website, and open sub-menu's to the left (instead of right) -

i'm building responsive menu. bigger versions of menu work great. here menu looks expanded:

when page gets smaller, menu disappears (using display: hidden; in css). "menu" link appears in version in place of horizontal menu. hide menu button in larger versions of responsive site.

the menu button position: fixed; right: 0; prepare right within container. i'm using 100% widths lot of things on size of site, position: absolute; right: 0; wouldn't work because doesn't know how wide screen is.

what problem is: i'm using jquery toggle vertical menu opens below "menu" link. opening off page. also, i'm not familiar setting vertical sub-menu's opening left , hoping help that. of sub-menu's open right (which set off page again).

what need: need figure out how prepare code have "parent" level of vertical menu float right of page , open right under "menu" links (either css or jquery), , kid elements open left , not right. menu not need float , downwards page (the vertical menu appears if "menu" hovered over"....so vertical menu needs remain open if menu hovered on well.

thanks in advance. i'm not utilize working style menu.

code:

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 are</a></li> <li><a href="#">what believe</a></li> <li><a href="#">when , 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 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 8</a></li> <li><a href="#">calendar of events</a></li> </ul> </li> <li><a href="#">give</a> <ul> <li><a href="#">how give</a></li> <li><a href="#">give online</a></li> </ul> </li> </ul> </div> <!-- navigation -->

css: (for 1 want menu float right on)

#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 { 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 { 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 { 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 { color: #2c59a7; }

jquery:

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

javascript jquery html css menu