This is A navigation bar with links that I made. I want that the black background will not move when hovering...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {font-size: large;}
<body>
<nav>
<ul>
<li> <a href="#Home"> Home </a> </li>
<li> <a href="#Articles"> Articles </a> </li>
<li> <a href="#About us"> About us </a> </li>
</ul>
</nav>
</body>
height: 50px;
to theul
will do the trick when the browser width is enough to make the40% width
of theul
fit all the children, but you may need to give theul
a bigger width when the screen gets smaller