bootstrap4 ナビゲーションバー マウスオーバーしたとき背景色がナビゲーションの縦幅全体にならない

現状

やりたいこと

viewのコード

%nav.navbar.navbar-expand-lg
  %button.navbar-toggler{"data-toggle" => "collapse", :type => "button"}
  .collapse.navbar-collapse
    %ul.navbar-nav
      %li.nav-item
        %a.nav-link{href: root_path} #{t '.top'}
      %li.nav-item.dropdown
        %a.nav-link.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"} #{t '.mypage'}
        .dropdown-menu
          = link_to "#{t '.where'}", '',  class: "dropdown-item"
          = link_to "#{t '.record'}", '',  class: "dropdown-item"

scssのコード

.navbar.navbar-expand-lg{
  background-color: #0000ff;
  .navbar-nav{
    >li >a{
      color: #FFFFFF;
    }
    >li >a:hover,
    .dropdown-toggle:hover,
      > .open > a:hover{
      background-color: whitesmoke;
      color: black;
    }
  }
}

やってみたこと

.navbar-nav{
    >li >a{
      display: inline-block;
      color: #FFFFFF;
    }

aタグにdisplay: inline-blockを設定すればよい、というのを見かけたので、設定してみましたが、上手くいきませんでした。
解決方法をご教示いただければと思います。