移动元素时在导航栏中填充

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 time enter 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><a href="#">Blog</a></li>
      <li><a href="#">Categories</a>
        <ul>
          <li><a href="#">Romance</a></li>
          <li><a href="#">Paranormal</a></li>
          <li><a href="#">Thriller</a></li>
          <li><a href="#">Horror</a></li>

        </ul>
      </li>
      <li><a href="#">Reviews</a>
        <ul>
          <li><a href="#">Star Rating 1</a></li>
          <li><a href="#">Star Rating 2</a></li>
          <li><a href="#">Star Rating 3</a></li>
          <li><a href="#">Star Rating 4</a></li>
          <li><a href="#">Star Rating 5</a></li>
        </ul>
      </li>
      <li><a href="#">Contest</a>
        <ul>
          <li><a href="#">Giveaways</a></li>
          <li><a href="#">Free Books for Reviews</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a>
        <ul>
          <li><a href="#">For Authors</a></li>
          <li><a href="#">For Bloggers</a></li>
        </ul>
      </li>
      <li><a href="#" class="signed"><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a></li>
    <li><a href="#" class="signed"><i class="fa fa-fw fa-user"></i>Sign In</a></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

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

Try This one.

Answer 2

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.