Good day, members of the forum. I wrote the simplest menu on jQuery.

Here is a piece of code:

jQuery('document').ready(function() { jQuery('li').hover( function() { var width = $(this).width; $(this).maxWidth = width; $(this).find('.submenu').stop().slideDown(); }, function() { $(this).find('.submenu').stop().slideUp('fast'); $(this).maxWidth = ""; }); }); 
 #nav-bg { width: 100%; background: none repeat scroll 0 0 #88B739; height: 55px; z-index: 15; } #nav-bg > #nav-content { min-width: 855px; max-width: 855px; margin: auto; z-index: 15; } #links li { z-index: 15; background: none repeat scroll 0 0 #88B739; float: left; display: block; height: 55px; line-height: 55px; text-decoration: none; } #links li a { z-index: 15; color: #FFF; display: block; padding-right: 5px; padding-left: 5px; height: 55px; line-height: 55px; text-decoration: none; } #links li a:hover { background-color: #516B23; } .submenu { z-index: 15; display: none; top: 44px; padding: 1px 0 0 0; background: #ddd; } .submenu>li { z-index: 15; clear: left; display: block; text-align: left; color: #000000; } .submenu>li>a { z-index: 15; white-space: pre-wrap; background: #ddd; font-size: 14px; line-height: 22px; display: inline-block; } #links { width: 100%; height: 55px; margin-left: -25px; margin-top: 0px; list-style: none; text-align: center; font-size: 15px; } .imgtomain a { background: url("../images/home.png") no-repeat scroll 0 0 transparent; display: block; font-size: 0; height: 55px; margin-left: -11px; margin-right: 0px; margin-top: -21px; width: 60px; } .imgtomain a:hover { background-color: #516B23; } .imgtomain { float: left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-bg"> <div id="nav-content"> <div class="imgtomain"> <h1><a href="/">Главная</a></h1> </div> <ul id="links"> <li><a href="/">Menu 1</a> <ul class="submenu" style="display:none;"> <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> </li> <li><a href="/">submenu 2</a> </li> </ul> </li> <li><a href="/">Menu 2</a> <ul class="submenu" style="display:none;"> <li>submenu 1</li> <li>submenu 2</li> </ul> </li> <li><a href="/contacts.html">Контакты</a> </li> </ul> </div> </div>

In principle, as seen in the example, when hovering, the width automatically grows.

How to restrict it to the width of the element that you have pointed to? Again, it is clear that I was trying to get it, but it did not help much.

Thank you in advance

  • #links li - position: relative; .submenu - position: absolute; top: 100%; left: 0; - soledar10
  • one
    We are not members of the forum :) SO is not a forum - Yuri
  • offtop @Yuri, okay, you’ll be Stackers. stakchanin. I think it sounds great. - Blc_Dragon

2 answers 2

Your mistakes:

  1. var width = $(this).width; There is no such function in jQuery. To get the width, you need to add parentheses at the end:
    var width = $(this).width();
  2. $(this).maxWidth = width; Such a function and purpose does not exist! To assign a style, you need to write it in css . And besides, all standard functions for changing something are written in brackets:
    $(this).css('max-width', width);

 $('document').ready(function() { $('li').hover( function() { $(this).css('max-width', $(this).width()); $(this).find('.submenu').stop().slideDown(); }, function() { $(this).find('.submenu').stop().slideUp('fast'); $(this).maxWidth = ""; }); }); 
 #nav-bg { width: 100%; background: none repeat scroll 0 0 #88B739; height: 55px; z-index: 15; } #nav-bg > #nav-content { min-width: 855px; max-width: 855px; margin: auto; z-index: 15; } #links li { z-index: 15; background: none repeat scroll 0 0 #88B739; float: left; display: block; height: 55px; line-height: 55px; text-decoration: none; } #links li a { z-index: 15; color: #FFF; display: block; padding-right: 5px; padding-left: 5px; height: 55px; line-height: 55px; text-decoration: none; } #links li a:hover { background-color: #516B23; } .submenu { z-index: 15; display: none; top: 44px; padding: 1px 0 0 0; background: #ddd; } .submenu>li { z-index: 15; clear: left; display: block; text-align: left; color: #000000; } .submenu>li>a { z-index: 15; white-space: pre-wrap; background: #ddd; font-size: 14px; line-height: 22px; display: inline-block; } #links { width: 100%; height: 55px; margin-left: -25px; margin-top: 0px; list-style: none; text-align: center; font-size: 15px; } .imgtomain a { background: url("../images/home.png") no-repeat scroll 0 0 transparent; display: block; font-size: 0; height: 55px; margin-left: -11px; margin-right: 0px; margin-top: -21px; width: 60px; } .imgtomain a:hover { background-color: #516B23; } .imgtomain { float: left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-bg"> <div id="nav-content"> <div class="imgtomain"> <h1><a href="/">Главная</a></h1> </div> <ul id="links"> <li><a href="/">Menu 1</a> <ul class="submenu" style="display:none;"> <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> </li> <li><a href="/">submenu 2</a> </li> </ul> </li> <li><a href="/">Menu 2</a> <ul class="submenu" style="display:none;"> <li>submenu 1</li> <li>submenu 2</li> </ul> </li> <li><a href="/contacts.html">Контакты</a> </li> </ul> </div> </div>

    Add to #links

     position: relative;

    And to .submenu

     position: absolute; top: 100%;

    In JS code left only animation. The rest is not necessary

     jQuery('document').ready(function() { jQuery('li').hover( function() { $(this).find('.submenu').stop().slideDown(); }, function() { $(this).find('.submenu').stop().slideUp('fast'); }); }); 
     #nav-bg { width: 100%; background: none repeat scroll 0 0 #88B739; height: 55px; z-index: 15; } #nav-bg > #nav-content { min-width: 855px; max-width: 855px; margin: auto; z-index: 15; } #links li { z-index: 15; background: none repeat scroll 0 0 #88B739; float: left; display: block; height: 55px; line-height: 55px; text-decoration: none; } #links li a { z-index: 15; color: #FFF; display: block; padding-right: 5px; padding-left: 5px; height: 55px; line-height: 55px; text-decoration: none; } #links li a:hover { background-color: #516B23; } .submenu { z-index: 15; display: none; top: 44px; padding: 1px 0 0 0; background: #ddd; position: absolute; top: 100%; } .submenu>li { z-index: 15; clear: left; display: block; text-align: left; color: #000000; } .submenu>li>a { z-index: 15; white-space: pre-wrap; background: #ddd; font-size: 14px; line-height: 22px; display: inline-block; } #links { width: 100%; height: 55px; margin-left: -25px; margin-top: 0px; list-style: none; text-align: center; font-size: 15px; position: relative; } .imgtomain a { background: url("../images/home.png") no-repeat scroll 0 0 transparent; display: block; font-size: 0; height: 55px; margin-left: -11px; margin-right: 0px; margin-top: -21px; width: 60px; } .imgtomain a:hover { background-color: #516B23; } .imgtomain { float: left; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav-bg"> <div id="nav-content"> <div class="imgtomain"> <h1><a href="/">Главная</a></h1> </div> <ul id="links"> <li><a href="/">Menu 1</a> <ul class="submenu" style="display:none;"> <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> </li> <li><a href="/">submenu 2</a> </li> </ul> </li> <li><a href="/">Menu 2</a> <ul class="submenu" style="display:none;"> <li>submenu 1</li> <li>submenu 2</li> </ul> </li> <li><a href="/contacts.html">Контакты</a> </li> </ul> </div> </div>