Ul li:hover HTML CSS

Question

I've got this problem.

My nav bar is 2.5rem. And i've made an ul li:hover font size increase.

But if I hover over my list element, the whole nav bar size increases to the size of my li too.

How can I block this?

 .navsecond { background-color: rgb(88, 87, 80); width: 100%; min-height: 2.5rem; display: inline-flex; flex: auto; float: left; } ul li:hover { color:rgb(233, 206, 119); font-size: larger; } ul li { list-style: none; display: inline-flex; flex-direction: row; } li { margin: 10px; font-weight: 200; color: white; }

 <div> <nav class="navsecond"> <ul> <li><b>Hallo</b></li> <li><b>Hallo</b></li> <li><b>Hallo</b></li> </ul> </nav> </div>

Answer 1

Giving static height to nav would solve your problem

 .navsecond { background-color: rgb(88, 87, 80); width: 100%; min-height: 2.5rem; height: 70px; display: inline-flex; flex: auto; float: left; } ul li:hover { color:rgb(233, 206, 119); font-size: larger; } ul li { list-style: none; display: inline-flex; flex-direction: row; } li { margin: 10px; font-weight: 200; color: white; }

 <div> <nav class="navsecond"> <ul> <li><b>Hallo</b></li> <li><b>Hallo</b></li> <li><b>Hallo</b></li> </ul> </nav> </div>

Answer 2

Don't change the font-size, scale the element....which also means you can add a transition.

 .navsecond { background-color: rgb(88, 87, 80); width: 100%; min-height: 2.5rem; display: inline-flex; flex: auto; float: left; } ul li:hover { color:rgb(233, 206, 119); /* this */ transform: scale(1.25); } ul li { list-style: none; display: inline-flex; flex-direction: row; transition: transform .33s ease; } li { margin: 10px; font-weight: 200; color: white; }

 <div> <nav class="navsecond"> <ul> <li><b>Hallo</b></li> <li><b>Hallo</b></li> <li><b>Hallo</b></li> </ul> </nav> </div>