Bootstrap 3 NavBar Move Link Underline Up - css

Question

I built a standard fixed top navbar with a line height of 150 pixels for the desktop view of the site. Additionally I styled the links to have a red underline on hover but the underline is down at the bottom of the navbar rather than under the text.
I get that this is because of the line height but I'm wondering how to move it back up to just below the words.
Link to fiddle: JSFiddle link
Here is the CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
background-color:#FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-bottom:3px solid #9e1e22; }
The HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="index.html">Brand</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>News</li>
<li class="divider"></li>
<li>Assessments</li>
<li>Improvements</li>
<li>Incident Response</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 1

Is this what you mean? Keep the NAV at 150 but the hover directly under the link.
#media (min-width: 768px) {
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
background-color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
border-bottom: 3px solid #9e1e22;
}
.navbar.navbar-default {
height: 150px;
padding-top: 45px;
}
}
.navbar.navbar-default {
background-color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
border-bottom: 3px solid #9e1e22;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="index.html">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li>About
</li>
<li>News
</li>
<li class="divider"></li>
<li>Assessments
</li>
<li>Improvements
</li>
<li>Incident Response
</li>
<li class="divider"></li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 2

I know its not exactly what you after but rather than underlining the menu option, have you not thought of just changing the color of the menu option instead when hovered over.
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
color: #9e1e22;
}