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

Question

嗨，我似乎无法在移动元素后移除背景颜色。 虽然元素已经移动并且它们运行良好，但是每次在此处输入图像描述时，我都会单击登录并注册，原始空间似乎显示为背景颜色。

HTML 代码：

<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 代码：

    /* 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;
}

试试这个。

Answer 2

您的问题是因为您的背景颜色在li而不是在a.signed但您正在移动您的a.signed with left: 300px; 而不是li 。

如果您将 class .signed放入列表项而不是链接，它将按您的预期工作。

这是修复代码： https://codepen.io/MateoStabio/pen/rNWeYXd

我确实建议您考虑完全重组您的导航，以便当您在左侧导航上的 hover 项目时右侧导航不会跳转。