html - Making anchor tag 100% height of parent on resize -

i have navigation this:

<ul>    <li><a href="#">link</a></li>    <li><a href="#">link</a></li>    <li><a href="#">link</a></li> </ul> 

and css set as

ul {display:table;} li {display:table-cell;} {display:block;} 

however when resize screen menu shrinks , text breaks on new line. link fine, links still occupy 1 line example padded : 10px 5px; , have parent element empty space.

it looks ugly have :hover changes bg color of anchor ...

thanks

so think problem when first list item multiple lines long, not second list item not vertically aligned first one. way have css set up, list items same height, need add vertical align property centers up.

so li css should like:

li {     display: table-cell;      vertical-align: middle; } 

you can check out codepen here