My navigation bar currently displays links to other pages stacked vertically. When hovering over the links, they change background-color, but I want them to expand to full screen.
I attempted adjusting the padding-left and padding-right, but it wasn't behaving as expected. I don't want to set fixed measurements that would affect responsiveness when resizing the browser window.
Is there a way for the links to expand only to the size of the containing <div>?
HTML:
<div id="website">
<nav>
<ul>
<li><a href="#wie">wie</a></li>
<li><a href="#hoe">hoe</a></li>
<li><a href="#wat">wat</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%;
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}