Как я могу расширить выпадающий список шире, чем заголовок

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>