Clickable li’s with different number of text lines inside

[tirengarfio]

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:

• jkfasdf
• jkffasdf fjaskdfasfs jajklfd fjklasdfas

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](http://jsfiddle.net/tirengarfio/y3NCq/19/).

[Andy Howells]

Are you saying you want 4 buttons inside the second LI? I’m a bit confused about what you’re looking to achieve?

[Paulie_D]

Me too…surely that’s the same as submenu (effectively): http://codepen.io/Paulie-D/pen/lDycA

Or did you mean that each item would not be a link?: http://codepen.io/Paulie-D/pen/uIvBd

[tirengarfio]

@Pauline_D im talking about the second option you mention. As you can see in that example the li area of the first item is not all clickable entire. I would like it was clickable entire.

[Paulie_D]

OK…that’s doable: http://codepen.io/Paulie-D/pen/dAJLt

[Author]

Posts