Bootstrap how to make a single line element in navbar take up the full height when other elements are 2 lines
<p>When the screen resizes, the longer elements in my navbar switch to two lines to take up less space. This makes the navbar taller. When I hover over a single line element it only highlights the original single line height, similar to the navbar in <a href="http://www.asti.ie" rel="nofollow">asti.ie</a>. How do I get it to highlight the full height of the navbar? And also to center the text vertically if possible. Thanks</p>

<p>Here's a fiddle: <a href="https://jsfiddle.net/0dad1czz/1/" rel="nofollow">https://jsfiddle.net/0dad1czz/1/</a></p>

<p>The result screen needs to be wide enough for the navbar to show. Also, I know the text overflows when the screen is too thin, that's no problem, I'll fix it later.</p>

<p>HTML:</p>

<pre><code>&lt;div id="topnav" class="container hidden-xs"&gt;
    &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
            &lt;div class="navbar-header"&gt;
            &lt;/div&gt;
            &lt;div class="collapse navbar-collapse" id="myNavbar" style="padding: 0;"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;LEADERSHIP DEVELOPMENT&lt;/a&gt;
                        &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;
                                &lt;div class="row border-between" style="width: 600px;"&gt;
                                    &lt;div class="col-sm-6"&gt;
                                        &lt;div class="nav-dropdown-info"&gt;
                                            &lt;img src="images/african-union-small.png"&gt;
                                            &lt;img src="images/ForminFinland_logo.png"&gt;
                                            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et suscipit neque. Curabitur consectetur ligula neque, ut accumsan lacus vestibulum id. Donec sollicitudin dignissim laoreet.&lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;ul class="col-sm-6"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;GOVERNMENT LEADERSHIP&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;EDUCATION LEADERSHIP&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;TEACHING LEADERSHIP&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;YOUTH LEADERSHIP&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;COMMUNITY LEADERSHIP&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;OUR WORK&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;COUNTRIES&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;PARTNERS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;MEDIA &amp; INFO&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p>SASS:</p>

<pre><code>@import "colours";

#topnav {
    width: 100%;
    margin: auto;
}

#topnav .navbar {
    background-color: #fff;
    border: 0;
    font-size: 16px;
    .nav {
        margin: auto;
        width: 100%;
        /*display: table;*/
        li {
            width: 14.2857142857%;
            margin: auto;
            /*display: table-cell;*/
            a {
                text-align: center;
                &amp;:hover {
                    background-color: $blue;
                    color: #fff;
                }
            }
        }

        .dropdown-menu {
            .nav-dropdown-info {
                padding: 15px 15px 25px 15px;
                img {
                    padding-left: 9px;
                    padding-right: 9px;
                }
                p {
                    padding-top: 30px;
                }
            }
            ul {
                list-style: none;
                padding-top: 10px;
            }
            li {
                width: auto;
            }
            li a {
                display: block;
                color: $black;
                text-align: left;
                text-decoration: none;
                padding: 10px 25px;
                &amp;:hover {
                    background-color: $blue;
                    color: #fff;
                }
            }
        }
    }
}

#topnav .navbar .nav &gt; li.dropdown.open.active &gt; a:hover, #topnav .navbar .nav &gt; li.dropdown.open &gt; a {
    color: #fff;
    background-color: $blue;
}

#topnav .navbar-toggle {
  float: left;
  margin-left: 15px;
}

@media (min-width: 0) {
  #topnav .navbar-toggle {
    display: block; /* force showing the toggle */
  }
}

@media (min-width: 992px) {
  body {
    padding: 0;
  }
  #topnav .navbar {
    right: auto;
    background: none;
    border: none;
  }
}
</code></pre>