如何使一个盒子可点击

Question

The menu image

您好，我有一个菜单列表，如上图所示。当我将鼠标悬停在它上面时，颜色会发生变化但直到我将鼠标悬停在文本本身上时才会被点击。当我将鼠标悬停在盒子上时，如何使盒子可点击？

非常感谢您的帮助。

    a
    {
    	text-decoration: none;
    	color: inherit;
    
    }
    
    
    nav ul
    {
    	background-color: #f49d33;
    	overflow: hidden;
    	color: white;
    	padding: 0;
    	text-align: center;
    	-webkit-transition: max-height 0.4s;
    	-ms-transition: max-height 0.4s;
    	-moz-transition: max-height 0.4s;
    	-o-transition: max-height 0.4s;
    	transition: max-height 0.4s;
    
    }
    
    nav ul li 
    {
    	display: inline-block;
    	padding: 20px;
    
    }
    
    nav ul li:hover 
    {
    	background-color: #e8d75c;
    
    
    }

    <nav>
    
    				<ul>
    					<li><a href="addCustomer.php"> Add Customer </a></li>
    					<li><a href="changePassword.php"> Change Password </a></li>
    					<li><a href="View_and_delete_orders.php"> View & Delete Orders  </a></li>
    					<li><a href="#"> View & Delete Customers  </a></li>
    					<li><a href="#"> Messages </a></li>
    					<li><a href="index.php"> Log out </a></li>
    				</ul>
    			
    </nav>

Answer 1

将填充移至a并将其设为inline-block。我还会使用:hover上的a伪类，而不是li

    a
    {
    	text-decoration: none;
    	color: inherit;
        display: inline-block;
        padding: 20px;        
    }
    
    
    nav ul
    {
    	background-color: #f49d33;
    	overflow: hidden;
    	color: white;
    	padding: 0;
    	text-align: center;
    	-webkit-transition: max-height 0.4s;
    	-ms-transition: max-height 0.4s;
    	-moz-transition: max-height 0.4s;
    	-o-transition: max-height 0.4s;
    	transition: max-height 0.4s;
    
    }
    
    nav ul li 
    {
    	display: inline-block;
    }
    
    nav ul li a:hover 
    {
    	background-color: #e8d75c;
    
    
    }

    <nav>
    
    				<ul>
    					<li><a href="addCustomer.php"> Add Customer </a></li>
    					<li><a href="changePassword.php"> Change Password </a></li>
    					<li><a href="View_and_delete_orders.php"> View & Delete Orders  </a></li>
    					<li><a href="#"> View & Delete Customers  </a></li>
    					<li><a href="#"> Messages </a></li>
    					<li><a href="index.php"> Log out </a></li>
    				</ul>
    			
    </nav>

Answer 2

您可以在标签

上设置li标签填充值

Answer 3

你的问题很简单：

padding: 20px上的{p> <a>在<a>和<li>的边缘之间产生了差距。将padding: 20px从<li>移至<a>即可解决此问题。