Padding in the navbar while shifting the element - html

Question

Hi I can't seem to be removing the background color after shifting elements. While the elements have moved and they are working perfectly but every timeenter image description here I am clicking on the sign in and sign up, the original space seems to show up as the background color.
HTML code:
<nav>
<ul>
<li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li>Blog</li>
<li>Categories
<ul>
<li>Romance</li>
<li>Paranormal</li>
<li>Thriller</li>
<li>Horror</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Star Rating 1</li>
<li>Star Rating 2</li>
<li>Star Rating 3</li>
<li>Star Rating 4</li>
<li>Star Rating 5</li>
</ul>
</li>
<li>Contest
<ul>
<li>Giveaways</li>
<li>Free Books for Reviews</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>For Authors</li>
<li>For Bloggers</li>
</ul>
</li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</li>
<li><i class="fa fa-fw fa-user"></i>Sign In</li>
</ul>
</nav>
CSS code:
/* navigation top menu */
nav{
position: relative;
top:0;
left:0;
padding: 5px 0 0 0;
width: 100%;
font-size: 1em;
}
.active
{
background-color: #F24F1B;
color: white;
}
nav::after{
content:'';
display: block;
clear:both;
}
nav ul{
list-style: none;
margin:0;
padding:0;
position: relative;
right: 200px;
}
nav ul li:hover {
background-color: #F24F1B;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: inline-block;
color:black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
nav ul li a:visited {
color:black;
}
nav ul li a .active{
color: white;
}
nav ul li a:hover {
background-color: #F24F1B;
color: white;
}
nav ul ul {
position: relative;
top: 100%;
background-color: #F24F1B;
display: none;
position: relative;
right: 0px;
}
nav ul ul li {
position: relative;
border-bottom: 2px solid rgb(128, 104, 104);
}
nav ul ul ul {
left: 100%;
top: 0px;
}
/* top level */
nav>ul {
padding-left: 200px;
color:white;
}
nav>ul>li {
float: left;
}
nav>ul>li>a {
width: auto;
padding: 10px 20px 15px 20px;
}
.signed {
position: relative;
left: 300px;
}

Answer 1

Your issue is because your background-color is on the li and not on a.signed but you are moving your a.signed with left: 300px; and not the li.
If you put the class .signed to the list item instead of the link, it will work as you'd expected.
Here's the code with the fix: https://codepen.io/MateoStabio/pen/rNWeYXd
I do recommend looking into restructuring your navigation entirely so that the right nav doesn't jump when you hover items on the left navigation.

Answer 2

.signed {
background-color: transparent;
position: relative;
left: 300px;
}
Try This one.