How can I expand the dropdown list wider than the title

Question

I am trying to make a simple dropdown menu using Javascript that slides up and down when the user hovers over the title.

It all works OK as long as the dropdown items are no wider than the title. But I cannot work out how to accommodate wider dropdown items, other than to hard code the width of all the items in the relevant list.

Is there a better way to do this (my code is below).

 $(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

In you css where ul li li add 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>