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>

but if i removed display:block then i might not get the look which i want — sony, Jul 15 '15 at 14:02

Paulie_D · Accepted Answer · 2015-07-15T14:20:40.587

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.

I fixed some of it, but can u please tell me how to validate others? — sony, Jul 15 '15 at 14:09
In your ans. i ran the code snippet but it didn't worked at corner — sony, Jul 15 '15 at 14:12
I mean when i hovering over the blocks just placing my cursor at corner the color is changed but the link did not activate — sony, Jul 15 '15 at 14:15

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

You have to set this in your a-tag style:

display: block
width: 100%
height: 100%

and the padding of li should be 0 px,
have a look here.

edited May 23 '17 at 11:44

Community

1
1

answered Jul 15 '15 at 14:03

Klaus

538
8
26

In which browser are you testing it? – Klaus Jul 15 '15 at 14:22

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

2 Answers2