My navigation bar is almost perfect, but there's one small issue: the opacity change when hovering doesn't reach all the way down to the bottom. It's a minor detail, but it bothers me. Here are some screenshots for reference: This: https://i.sstatic.net/j7Ilv.jpg shows the unselected state This: https://i.sstatic.net/6X2F8.jpg shows what happens when I hover over it
I'm not sure how to fix this issue in my HTML/CSS code:
HTML:
<div class="navbar center affix" role="navigation">
<ul>
<li><a href=# itemprop="url"><span itemprop="titlenav">Home</span></a></li></ul></div>
CSS:
.navbar {
background-color:#747A80;
width:100%;
height:auto;
box-shadow: 0px 1px 10px #5E5E5E;
top:0px;
border-bottom:solid #000000;
}
.navbar li {
display:inline-block;
text-align: center;
color: #FFFFFF;
}
.navbar li a{
display: block;
padding:15px;
margin-bottom:-10px;
line-height:20px;
color:#F9F9F9;
}
.navbar li:hover {
opacity:1;
background:#575A5C
}
If anyone has any suggestions on how to fix this issue, I would greatly appreciate it! Thank you!