当我将鼠标悬停在整个块上时如何激活链接而不仅仅是文本？

Question

当我将鼠标悬停在菜单上时，颜色会正确更改，但链接只会在我将鼠标悬停在文本上时激活，我希望它在我刚刚触摸块或更改颜色时激活。请帮助我任何帮助将不胜感激

    	a {
    	  text-decoration: none;
    	  color: #fff;
    	}
    	#navbar {
    	  background: #204d86;
    	  border-radius: 5px;
    	}
    	#navbar>ul {
    	  list-style: none;
    	  margin: 0;
    	  padding: 0;
    	  height: 40;
    	  margin-left: 300px;
    	}
    	#navbar>ul>li {
    	  float: left;
    	  padding: 10px 35px;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li:hover {
    	  background: #5cadff;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li>ul {
    	  display: none;
    	  padding: 0;
    	  position: absolute;
    	  background: #204d86;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li>ul>li {
    	  padding: 0 20px;
    	  line-height: 40px;
    	  display: block;
    	  background: #5cadff;
    	}
    	#navbar>ul>li:hover>ul {
    	  display: block;
    	}
    	#navbar>ul>li>ul>li>ul {
    	  display: none;
    	  padding: 0 30px;
    	  position: absolute;
    	}
    	#navbar li:hover > a {
    	  color: #000;
    	}
    	#navbar>ul>li>ul>li:hover {
    	  background: #204d86;
    	}
    	#navbar:after {
    	  content: "";
    	  clear: both;
    	  display: table;
    	}
    	

<div id="navbar">
  <ul>
    <li><a class="active" href="../index/myindex.html">HOME</a>
    </li>

    <li><a href="#">STAYING HEALTHY</a>
      <ul>
        <li><a href="#">Diet & Weight loss</a>
        </li>
        <li><a href="#">Exercises</a>
        </li>
        <li><a href="#">Physical Activity</a>
        </li>
        <li><a href="#">Healthy Eating</a>
        </li>
      </ul>
    </li>

    <li><a href="#">DISEASES</a>
      <ul>
        <li><a href="#">Stock</a>
        </li>
        <li><a href="#">Osteoporosis</a>
        </li>
        <li><a href="#">Diabetes</a>
        </li>
        <li><a href="#">Heart Disease</a>
        </li>
      </ul>
    </li>

    <li><a href="#">MIND&MOOD </a>
      <ul>
        <li><a href="#">Depression</a>
        </li>
        <li><a href="#">Anxiety</a>
        </li>
        <li><a href="#">Addiction</a>
        </li>
        <li><a href="#">Stress</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

a {
    text-decoration:none;
    color:#fff;
    display: block;
}

然后，将您在li 上的任何填充移动到链接本身。根据需要进行调整。

body {
  background: #000;
}
a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#navbar {
  background: #204d86;
  border-radius: 5px;
}
#navbar>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 40px;
}
#navbar>ul>li {
  float: left;
  border-radius: 5px;
}
#navbar>ul>li>a {
  padding: 10px 35px;
}
#navbar>ul>li:hover {
  background: #5cadff;
  border-radius: 5px;
}
#navbar>ul>li>ul {
  display: none;
  padding: 0;
  position: absolute;
  background: #204d86;
  border-radius: 5px;
}
#navbar>ul>li>ul>li {
  line-height: 40px;
  display: block;
  background: #5cadff;
}
#navbar>ul>li>ul>li>a {
  padding: 0 20px;
}
#navbar>ul>li:hover>ul {
  display: block;
}
#navbar>ul>li>ul>li>ul {
  display: none;
  padding: 0 30px;
  position: absolute;
}
#navbar li:hover > a {
  color: #000;
}
#navbar>ul>li>ul>li:hover {
  background: #204d86;
}

<div id="navbar">
  <ul>
    <li><a class="active" href="../index/myindex.html">HOME</a>

    </li>
    <li><a href="#">STAYING HEALTHY</a>

      <ul>
        <li><a href="#">Diet & Weight loss</a>
        </li>
        <li><a href="#">Exercises</a>
        </li>
        <li><a href="#">Physical Activity</a>
        </li>
        <li><a href="#">Healthy Eating</a>
        </li>
      </ul>
    </li>
    <li><a href="#">DISEASES</a>

      <ul>
        <li><a href="#">Stock</a>
        </li>
        <li><a href="#">Osteoporosis</a>
        </li>
        <li><a href="#">Diabetes</a>
        </li>
        <li><a href="#">Heart Disease</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

您还应该验证 CSS，因为我发现了几个错误。

Answer 2

你必须在你的 a-tag 样式中设置它：

• 显示：块
• 宽度：100%
• 身高：100%

而li的内边距应该是0 px,
看看here。