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

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>