When setting a background on my <ul>, the background-color doesn't cover its <li> children elements (their background doesn't change). If I set background for <a> as well, that element's background changes but a thin underline appears: https://codepen.io/Boryamba/pen/XWJpzvE
I want <li> elements to have same background-color as my top-menu.
What am I doing wrong?
* {
padding : 0;
margin : 0;
box-sizing : border-box;
background-color: #546a76;
}
.page-content {
display: grid;
grid-template-rows: 8fr 8fr 1fr;
}
.top-header {
display: grid;
grid-template-rows: .5fr 7fr;
height: 100vh;
}
.top-menu-list {
display: flex;
flex-direction: row;
list-style-type: none;
padding: 1rem;
justify-content: flex-end;
background-color: #37454d;
}
.top-menu-list a {
text-decoration: none;
font-size: 150%;
}<body class="page-content"><header class="top-header"><nav class="top-menu"><ul class="top-menu-list"><li><a href="#about">Lorem</a></li><li><a href="#services">Lorem</a></li><li><a href="#contacts">Lorem</a></li></ul></nav></header></body>