UPD:

I applied the proposed method to the first level drop-down menu, and the positioning of the second-level menu was no longer properly positioned. How correctly to register, that positioning for both submenus worked?

$("nav ul li").on("mouseover", function(e) { $("ul", this).position({ collision: "flip flipfit", my: "left top", at: "left bottom", of: this, within: ".wrapper" }); }); $("nav ul li li").on("mouseover", function(e) { $("ul", this).position({ collision: "flip flipfit", my: "left top", at: "right top", of: this, within: ".wrapper" }); });

There is a page that uses a multi-level menu on CSS. Now the submenu is located to the right of the parent. But the problem is that if the text is too long, then it does not fit. How to automatically move a submenu to the left of the parent, if the text is more than can fit?

HTML:

 <nav> <ul class="header_main_menu"> <li class="active"><a href="#">Главная</a> <ul> <li><a href="#">ΠŸΠΎΠ΄Π±ΠΎΡ€ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ²<br>срСднСго Π·Π²Π΅Π½Π°</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li class="active"><a href="#">ΠŸΠΎΠ΄Π±ΠΎΡ€ Ρ‚ΠΎΠΏ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ²</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">Π’Ρ€Π΅Π½ΠΈΠ½Π³ΠΈ ΠΈ мастСр-классы</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">ΠžΡ†Π΅Π½ΠΊΠ° пСрсонала</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">HR Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> </ul> </li> <li><a href="#">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">Π Π°Π±ΠΎΡ‚ΠΎΠ΄Π°Ρ‚Π΅Π»ΡŽ</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">Π‘ΠΎΠΈΡΠΊΠ°Ρ‚Π΅Π»ΡŽ</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста 1</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a></li> </ul> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a></li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a></li> </ul> </li> </ul> </li> <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li> </ul> </nav>

CSS:

 header nav { float: left; margin: 16px 0 0 0; width: 760px; height: 44px; position: relative; } #inner_page header nav { float: none; clear: both; margin: 0 0 0 13px; width: 960px; } header nav:before, header nav:after { display: block; content: ""; width: 64px; height: 44px; -webkit-transform: skew(-29deg); -moz-transform: skew(-29deg); -ms-transform: skew(-29deg); -o-transform: skew(-29deg); transform: skew(-29deg); position: absolute; z-index: 1; } header nav:before { background: #e7bd76; top: -14px; left: -3px; } #inner_page header nav:before { top: -40px; left: 180px; } header nav:after { background: #1254ac; top: 0; left: 0; } header nav > ul { margin: 0 0 0 12px; height: 44px; background: #1254ac; position: relative; z-index: 2; } header nav > ul > li { float: left; position: relative; } header nav > ul > li > a { display: block; padding: 0 18px; height: 44px; font-weight: 700; font-size: 13px; line-height: 44px; color: #c7ddfb; text-transform: uppercase; text-decoration: none; outline: none; } header nav > ul > li:hover > a { background: #6398de; color: #fff; } header nav > ul > li.active > a { color: #fff; text-decoration: none; } header nav ul ul { display: none; min-width: 100%; background: #6398de; position: absolute; top: 44px; left: 0; } header nav ul ul.align_right { left: auto; right: 0; } header nav li:hover > ul { display: block; } header nav ul ul li { position: relative; } header nav ul ul a { display: block; padding: 8px 18px 9px 18px; border-bottom: 1px dotted #a0c2ee; white-space: nowrap; font-size: 15px; line-height: 18px; color: #fff; text-decoration: none; outline: none; } header nav ul ul li:last-child a { border: none; } header nav ul ul a:hover { background: #6fa2e6; } header nav ul ul li.active > a { border-bottom: 1px solid #6fa2e6; background: #1254ac; -webkit-box-shadow: 0 -1px 0 0 #6fa2e6; -moz-box-shadow: 0 -1px 0 0 #6fa2e6; box-shadow: 0 -1px 0 0 #6fa2e6; font-weight: 700; } header nav ul ul ul { min-width: auto; top: 0; left: 100%; } header nav ul ul ul.align_right { left: auto; right: 100%; }

enter image description here

  • Show how you display the menu. - tutankhamun
  • Ordinary lists joxi.ru/Y2Lp6QRSnRV342 - Frontender
  • Code is better to add to the question . Do you show submenus using jQuery or CSS (: hover)? - tutankhamun
  • CSS. jQuery is not used at all. - Frontender
  • The jQuery label in question is that jQuery can be used to solve the problem. But you asked if jQuery is being used at the moment. Now not used. - Frontender

1 answer 1

You can use the jQueryUI position . The collision property equal to flipfit allows flipfit to place an element depending on the availability of free space from different sides relative to the element specified in the property of

Like that:

 $(function($) { $('nav ul li li').on('mouseover', function(e) { $('ul', this).position({ collision: 'flip flipfit', my: 'left top', at: 'right top', of: this }); }); }); 
 nav > ul > li ul { background: #cdc; box-shadow: 0 2px 4px #333; list-style: none; margin: 0; padding: 0; position: absolute; } nav > ul > li { display: block; float: left; margin: 5px 10px; padding: 0; position: relative; } nav li { padding: 3px 10px; white-space: nowrap; } nav ul ul { display: none; } nav li li:hover { background: #bcb; } nav li:hover > ul { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <nav> <ul class="header_main_menu"> <li class="active"><a href="#">Главная</a> <ul> <li><a href="#">ΠŸΠΎΠ΄Π±ΠΎΡ€ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ²<br>срСднСго Π·Π²Π΅Π½Π°</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a> </li> </ul> </li> <li class="active"><a href="#">ΠŸΠΎΠ΄Π±ΠΎΡ€ Ρ‚ΠΎΠΏ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ²</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a> </li> </ul> </li> </ul> </li> <li><a href="#">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a> </li> </ul> </li> <li><a href="#">Π‘ΠΎΠΈΡΠΊΠ°Ρ‚Π΅Π»ΡŽ</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста 1</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню с большим количСством тСкста</a> </li> </ul> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> <ul> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 1</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 2</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 3</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 4</a> </li> <li><a href="#">ΠŸΡƒΠ½ΠΊΡ‚ мСню 5</a> </li> </ul> </li> </ul> </li> <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </li> </ul> </nav>

  • I understand it will not work when display: none? - Frontender
  • Did not quite understand the question. Completed the answer with an example - tutankhamun
  • What you need, thanks! The last question just stayed. How to restrict the area relative to which the menu is flipped to a specific block. and not the window? - Frontender
  • Since there is a block ".wrapper", which has overflow: hidden. And so the menu is not visible, it is beyond the right edge of the block. Jumps to the left only if the browser window is reduced. - Frontender
  • Understood. Property within - Frontender