如何突出显示整个组件

Question

我正在使用reactjs来构建我的网站。 我已经使用npm run eject命令使用CSS模块。

当我将鼠标悬停在导航栏项目上时，我希望与以下内容保持一致。

上面的内容在鼠标悬停时覆盖了整个导航栏，但在我的情况下却没有发生，请参见下图。

下面是反应代码

<Navbar className={classes.navbar_header}>
    <Navbar.Header>
      <Navbar.Brand className={classes.navbar_logo}>
         <Image src={ logo }/>
      </Navbar.Brand>
    </Navbar.Header>
    <Nav pullRight className={classes.nav_menu}>
      <NavItem href="#" className={classes.image_games}>
        GAMES
      </NavItem>
      <NavItem eventkey={2} className={classes.image_android}>
        APPS
      </NavItem>
      <NavDropdown eventkey={4} title="EN">
        <MenuItem eventkey={4.1}>Spanish</MenuItem>
        <MenuItem eventkey={4.2}>English</MenuItem>
      </NavDropdown>
      <NavItem eventkey={5}>
       Login button
      </NavItem>
    </Nav>
  </Navbar>

下面是CSS。

.logo {
  float : left;
}

.menu {
  float: right;
}

.navbar_header{

  width: auto;
  background: #fdfdfd;
  border-bottom: 1px solid #e2e2e3;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-top: 2px solid #fafafa;
}

.nav_menu {
    display: block;
    position: relative;
    float: right;
    border-top: 2px solid #fafafa;
    margin: 0;
    padding: 0;
}

.navbar_logo {
  float: left;
  width: 200px;
  height: 60px;
  line-height: 70px;
  font-size: 30px;
}

.image_games {
  display: block;
  position: relative;
  float: right;
  border-top: 2px solid #fafafa;
  background: url("Some specific link") no-repeat;
  background-position: 8px -77px;
  padding-left:30px;
}
.image_android {
  display: block;
  position: relative;
  float: right;
  border-top: 2px solid #fafafa;
  background: url("Some specific link") no-repeat;
  background-position: 8px -11px;
  padding-left:30px;
}

.image_android:hover {
  background-color: gray;
}
.image_games:hover {
  background-color: gray;
}

如果您需要其他任何信息，请告诉我。