[Solved]-React Bootstrap, Adding Hover Effects to NavItems-Reactjs

const { Navbar, Nav, NavItem, NavDropdown, MenuItem } = ReactBootstrap;

class App extends React.Component {
  render() {
    return (
      <div>
        <Navbar inverse collapseOnSelect className="nav-bar">
          <Navbar.Header>
            <Navbar.Brand>
              <a href="#">efrt</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={1} href="#">
                Features
              </NavItem>
              <NavItem eventKey={2} href="#">
                Who we Are
              </NavItem>
            </Nav>
            <Navbar.Form pullRight />
            <Nav pullRight>
              <NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
                <MenuItem eventKey={3.3}>Member</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.3}>Coach</MenuItem>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<style>
  .navbar-inverse .navbar-nav>li>a:hover {
    background-color: green;
  }
</style>
<div id="root"></div>