修复导航栏子菜单从屏幕外消失的问题

Question

I am using the following script as navbar, however I can't figure out how to make the menus/submenus respect the screen sides, and not continue to open outside of the screen border.. I don't want to change the default behavior (direction) of all the menus, just to change it it it would be cut by any of the sides..

I found a similar post (and another one too), but I don't know how to implement the same answer to this current code.

Example of the menu being cut by the side of the monitor:

Here is the code snippet, along with jsfiddle link too.

 $(document).ready(function() { /* MAIN MENU */ $('#main-menu > li:has(ul.sub-menu)').addClass('parent'); $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent'); $('#menu-toggle').click(function() { $('#main-menu').slideToggle(300); return false; }); $(window).resize(function() { if ($(window).width() > 700) { $('#main-menu').removeAttr('style'); } }); }); 

 body { background-color: #eee; background-image: url(../images/patterns/light_toast.png); color: #666; font-family: 'Open Sans', sans-serif; font-size: 12px; margin: 0px; padding: 0px; } a { color: #23dbdb; text-decoration: none; } a:hover { color: #000; } ol, ul { list-style: none; padding: 0px; margin: 0px; } #wrap { margin: 0 auto; } .inner { margin: 0 auto; max-width: 940px; padding: 0 40px; } .relative { position: relative; } .right { float: right; } .left { float: left; } /* HEADER */ #wrap>header { background-color: #333; padding-bottom: 20px; } .logo { display: inline-block; font-size: 0; padding-top: 15px; } #navigation { position: absolute; right: 40px; bottom: 0px; } #menu-toggle { display: none; float: right; } /* HEADER > MENU */ #main-menu { float: right; font-size: 0; margin: 10px 0; } #main-menu>li { display: inline-block; margin-left: 30px; padding: 2px 0; } #main-menu>li.parent { background-image: url(../images/plus-gray.png); background-size: 7px 7px; background-repeat: no-repeat; background-position: left center; } #main-menu>li.parent>a { padding-left: 14px; } #main-menu>li>a { color: #eee; font-size: 14px; line-height: 14px; padding: 30px 0; text-decoration: none; } #main-menu>li:hover>a, #main-menu>li.current-menu-item>a { color: #23dbdb; } /* HEADER > MENU > DROPDOWN */ #main-menu li { position: relative; } ul.sub-menu { /* level 2 */ display: none; left: 0px; top: 38px; padding-top: 10px; position: absolute; width: 150px; z-index: 9999; } ul.sub-menu ul.sub-menu { /* level 3+ */ margin-top: -1px; padding-top: 0; left: 149px; top: 0px; } ul.sub-menu>li>a { background-color: #333; border: 1px solid #444; border-top: none; color: #bbb; display: block; font-size: 12px; line-height: 15px; padding: 10px 12px; } ul.sub-menu>li>a:hover { background-color: #2a2a2a; color: #fff; } ul.sub-menu>li:first-child { border-top: 3px solid #23dbdb; } ul.sub-menu ul.sub-menu>li:first-child { border-top: 1px solid #444; } ul.sub-menu>li:last-child>a { border-radius: 0 0 2px 2px; } ul.sub-menu>li>a.parent { background-image: url(../images/arrow.png); background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center; } #main-menu li:hover>ul.sub-menu { display: block; /* show the submenu */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <div id="wrap"> <header> <div class="inner relative"> <a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a> <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a> <nav id="navigation"> <ul id="main-menu"> <li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li> <li class="parent"> <a href="#">Features</a> <ul class="sub-menu"> <li><a href="#"><i class="icon-wrench"></i> Elements</a></li> <li><a href="#"><i class="icon-credit-card"></i> Pricing Tables</a></li> <li><a href="#"><i class="icon-gift"></i> Icons</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li class="parent"> <a href="#">Blog</a> <ul class="sub-menu"> <li><a href="#">Large Image</a></li> <li><a href="#">Medium Image</a></li> <li><a href="#">Masonry</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> <li><a href="#">Double Sidebar</a></li> <li><a href="#">Single Post</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="clear"></div> </div> </header> 

Answer 1

in your sub-sub menus you're aligning based on left margin at 149px, just use the same attribute but instead for the right. right:149px; instead of left:149px;

ul.sub-menu ul.sub-menu {
  /* level 3+ */
  right: 149px;
}

Also you can align the sub menus to the left of the nav items. To do this use :

ul.sub-menu { 
  /* level 2 */
  right: 0;
  left: initial;
}

I included both examples in this snippet:

 $(document).ready(function() { /* MAIN MENU */ $('#main-menu > li:has(ul.sub-menu)').addClass('parent'); $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent'); $('#menu-toggle').click(function() { $('#main-menu').slideToggle(300); return false; }); $(window).resize(function() { if ($(window).width() > 700) { $('#main-menu').removeAttr('style'); } }); }); 

 body { background-color: #eee; background-image: url(../images/patterns/light_toast.png); color: #666; font-family: 'Open Sans', sans-serif; font-size: 12px; margin: 0px; padding: 0px; } a { color: #23dbdb; text-decoration: none; } a:hover { color: #000; } ol, ul { list-style: none; padding: 0px; margin: 0px; } #wrap { margin: 0 auto; } .inner { margin: 0 auto; max-width: 940px; padding: 0 40px; } .relative { position: relative; } .right { float: right; } .left { float: left; } /* HEADER */ #wrap>header { background-color: #333; padding-bottom: 20px; } .logo { display: inline-block; font-size: 0; padding-top: 15px; } #navigation { position: absolute; right: 40px; bottom: 0px; } #menu-toggle { display: none; float: right; } /* HEADER > MENU */ #main-menu { float: right; font-size: 0; margin: 10px 0; } #main-menu>li { display: inline-block; margin-left: 30px; padding: 2px 0; } #main-menu>li.parent { background-image: url(../images/plus-gray.png); background-size: 7px 7px; background-repeat: no-repeat; background-position: left center; } #main-menu>li.parent>a { padding-left: 14px; } #main-menu>li>a { color: #eee; font-size: 14px; line-height: 14px; padding: 30px 0; text-decoration: none; } #main-menu>li:hover>a, #main-menu>li.current-menu-item>a { color: #23dbdb; } /* HEADER > MENU > DROPDOWN */ #main-menu li { position: relative; } ul.sub-menu { /* level 2 */ display: none; top: 38px; padding-top: 10px; position: absolute; width: 150px; z-index: 9999; right:0; left:initial; } ul.sub-menu ul.sub-menu { /* level 3+ */ margin-top: -1px; padding-top: 0; right: 149px; top: 0px; } ul.sub-menu>li>a { background-color: #333; border: 1px solid #444; border-top: none; color: #bbb; display: block; font-size: 12px; line-height: 15px; padding: 10px 12px; } ul.sub-menu>li>a:hover { background-color: #2a2a2a; color: #fff; } ul.sub-menu>li:first-child { border-top: 3px solid #23dbdb; } ul.sub-menu ul.sub-menu>li:first-child { border-top: 1px solid #444; } ul.sub-menu>li:last-child>a { border-radius: 0 0 2px 2px; } ul.sub-menu>li>a.parent { background-image: url(../images/arrow.png); background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center; } #main-menu li:hover>ul.sub-menu { display: block; /* show the submenu */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <div id="wrap"> <header> <div class="inner relative"> <a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a> <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a> <nav id="navigation"> <ul id="main-menu"> <li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li> <li class="parent"> <a href="#">Features</a> <ul class="sub-menu"> <li><a href="#"><i class="icon-wrench"></i> Elements</a></li> <li><a href="#"><i class="icon-credit-card"></i> Pricing Tables</a></li> <li><a href="#"><i class="icon-gift"></i> Icons</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li class="parent"> <a href="#">Blog</a> <ul class="sub-menu"> <li><a href="#">Large Image</a></li> <li><a href="#">Medium Image</a></li> <li><a href="#">Masonry</a></li> <li> <a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a> <ul class="sub-menu"> <li><a href="#">Full Width</a></li> <li><a href="#">Left Sidebar</a></li> <li><a href="#">Right Sidebar</a></li> <li><a href="#">Double Sidebar</a></li> </ul> </li> <li><a href="#">Double Sidebar</a></li> <li><a href="#">Single Post</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="clear"></div> </div> </header> 

Answer 2

I guess the real question here is, where do you want it to go? If there's no page real estate to the right of your menu, you can't place the submenu to the right, you have to place it to the left.

ul.sub-menu ul.sub-menu { /* level 3+ */
    margin-top: -1px;
    padding-top: 0;
    left: -149px;
    top: 0px;
}

Note, the left value is changed from 149px to -149px. That places the submenu to the left (where you have screen real estate), and not to the right, where you don't.