html - How do I make the hover background color fill the height of the link? -

html - How do I make the hover background color fill the height of the link? -

how create hover background-color fill entire height of navigation bar plus padding of text instead of text.

i want create this.

fiddle

what missing? give thanks in advance!

here go. i've created jsfiddle you. working good:

http://jsfiddle.net/crjf4/3/

updated css:

<style> .fa { font-size: 15px; margin-top: -10px; margin-bottom: -10px; } .navbar-height { height: 65px; } .clearboth { clear: both; } /* workbar styles */ .fixed-top { position: fixed; top: 0; right: 0; left: 0; background: #fff; text-align: center; height: 67px; margin: 0 auto; width: 100%; } .workbar { text-align: center; margin: 0 auto; background-color: #ffe6e6; } .worknav { list-style: none; padding-left: 0px; margin: 0 auto; text-align: center; } .worknav> li { text-align: center; display: inline-block; padding-left: 20px; padding-right: 20px; padding-top: 11px; padding-bottom: 11px; } .worknav> li:hover { color: yellow; } .worknav>li:hover { background-color: black; } .worknav > li > { text-decoration: none; color: #666; } .centered { float: none; margin-left: auto; margin-right: auto; } .worktop { margin-top: 70px; } </style>

html css hover