

## 現状

[![画像の説明をここに入力](https://i.stack.imgur.com/jmDbP.png)](https://i.stack.imgur.com/jmDbP.png)

## やりたいこと

[![画像の説明をここに入力](https://i.stack.imgur.com/If8yX.png)](https://i.stack.imgur.com/If8yX.png)

## viewのコード

[code]

    %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"
    
[/code]

## scssのコード

[code]

    .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;
        }
      }
    }
    
[/code]

## やってみたこと

[code]

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

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


CC BY-SA 3.0
2018-03-28T10:18:24.807
42711
2018-03-28T10:18:24.807
25446
question
ruby-on-rails
bootstrap4　ナビゲーションバー　マウスオーバーしたとき背景色がナビゲーションの縦幅全体にならない