如何將下拉列表擴展為比標題更寬

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>