How to activate the link when i hover over the full block not only just text?

Question

When I hovering over the menu the color changes properly but the link will activate only when i hovering over the text i want it to be activate at the time when i just touch the block or when it changes its color.Please help me any help would be appreciated

    	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;
}

THEN, move any padding you had on the li to the links themselves. Adjust as required.

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>

You should also validate the CSS as I spotted a couple of errors.