Clickable li's with different number of text lines inside

HTML & CSS
1

Hi,

I’m trying to render clickable li’s but independent from the content that there is inside of the li. For example the code below has one button with just one line and another one with four lines:

<ul>
  <li><a href="#">jkfasdf</a></li>
  <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li>
</ul>

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  float: left;
}

li {
  padding: 10px; display: inline-block;
  border-left: 1px solid white;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}
li:first-child {border-left: none;}

a {

}

Here is the jsfiddle.

2

It isn’t really clear why you’d want the LI “clickable” independently of the A. Do you mean you just want a visual change on hover? Something like this?

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: table;
}

li {
  padding: 10px; 
  border-left: 1px solid white;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
li:first-child {border-left: none;}
li:hover {background: blue;}

li:hover a {color: white;}