如何将下拉列表扩展为比标题更宽

Question

我正在尝试使用Javascript创建一个简单的下拉菜单，当用户将鼠标悬停在标题上方时，该菜单会上下滑动。

只要下拉列表的标题不超过标题，一切正常。 但是，除了硬编码相关列表中所有项目的宽度之外，我无法弄清楚如何容纳更大的下拉项目。

有没有更好的办法做到这一点（我的代码在下面）。

 $(document).ready(function() { $(document).click(function(event) { var text = $(event.target).text(); }); $("nav li").hover( function() { $(this) .find("ul>li") .stop() .slideDown(400); }, function() { $(this) .find("ul>li") .stop() .slideUp(400); } ); }); 

 ul { left: 0; margin: 0; padding: 0; /* to prevent the menu indenting - ul has padding by default */ list-style: none; } ul li { float: left; height: 30px; line-height: 30px; text-align: center; background-color: purple; width: 100px; } ul li a { color: #fff; text-decoration: none; } ul li li { background-color: purple; color: #fff; text-decoration: none; display: none; } ul li li:hover { background-color: green; } 

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div> <nav> <ul> <li><a href="#">Home</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Extra Extra Wide Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li><a href="#">Help</a></li> </ul> </nav> </div> 

Answer 1

在你的css中， ul li li增加width

ul li li {
   background-color: purple;
   color: #fff;
   text-decoration: none;
   display: none;
   width: 200px;
}

 $(document).ready(function() { $(document).click(function(event) { var text = $(event.target).text(); }); $('nav li').hover ( function() { $(this).find('ul>li').stop().slideDown(400); }, function() { $(this).find('ul>li').stop().slideUp(400); } ); }); 

 ul { left: 0; margin: 0; padding: 0; /* to prevent the menu indenting - ul has padding by default */ list-style: none; } ul li { float: left; height: 30px; line-height: 30px; text-align: center; background-color: purple; width: 100px; } ul li a { color: #fff; text-decoration: none; } ul li li { background-color: purple; color: #fff; text-decoration: none; display: none; width: 200px } ul li li:hover { background-color: green; } 

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div> <nav> <ul> <li><a href="#">Home</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Extra Extra Wide Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> <li><a href="#">Help</a></li> </ul> </nav> </div>