Question

I build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.

#sidebar1 li {
  list-style: none;
  position: relative;
  width: 120px;
  height: 30px;
  padding: 0 20px;
  background-color: black;
  line-height: 30px;
  cursor: pointer;
}

#sidebar1 li a {
  text-decoration: none;
  color: white;    
}

What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu’s item a link will be clicked. Thats problem is that i tried it and it didnt work

Answer 1

Just use display: block to make the a element fill the available horizontal width of the parent element:

#sidebar1 li a{
    text-decoration:none;
    color: white;
    display: block;
    height: 100%;
}

The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you’ll enforce a space between the edges of the a and the li.

Further, in your li I’ve not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they’re not over the link then the cursor’s type, that of pointer, is merely confusing when clicking produces no effect:

#sidebar1 li {
    list-style: none;
    position: relative;
    width:120px;
    height: 30px;
    background-color: black;
    line-height: 30px;
}