Html 向引导导航栏项添加白色背景

我正在使用bootstrap创建一个个人网站，我有一个透明的导航栏，如下所示：

这样写的：

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Jon Snow - Knows    Nothing</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll">
                <a href="#about">About Me</a>
            </li>
            <li class="page-scroll">
                <a href="#work">Work</a>
            </li>
            <li class="page-scroll">
                <a href="#blog">Blog</a>
            </li>
            <li class="page-scroll">
                <a href="#contact">Contact Me</a>
        </ul>
      </div>
    </div>
 </nav>

我试图在悬停和焦点上添加一个突出显示到我的导航栏项目，该项目应该如下所示：

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Jon Snow - Knows    Nothing</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll">
                <a href="#about">About Me</a>
            </li>
            <li class="page-scroll">
                <a href="#work">Work</a>
            </li>
            <li class="page-scroll">
                <a href="#blog">Blog</a>
            </li>
            <li class="page-scroll">
                <a href="#contact">Contact Me</a>
        </ul>
      </div>
    </div>
 </nav>

我尝试过这种变体，但没有成功：

.nav li > a {
background-color:#000000;
color: #ffffff;
}

还有小提琴：

这可能有用

.navbar.navbar-default .navbar-nav li a:hover {
background-color:#000000;
color: #ffffff;
border-radius:5px;
}