如何让我的导航栏显示我在哪个页面

Question

    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <!-- end nav collapse button -->
                </button>
                <!-- logo -->
                <a class="navbar-brand" href="index.html">Dad's Site</a>

                <!-- end navbar header -->
            </div>
            <!-- start nav collapse -->
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a> 

上面显示的类活动无法正常工作。我希望它在当前页面下方显示白线或类似的东西 然后我将能够看到我在哪个导航页面取决于我选择了哪个

                        </li>
                        <li><a href="about.html">About</a>
                        </li>

                    <li class="dropdown">

                        <a href="gallery.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Photo Gallery <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">Gallery 1</a>

                            </li>
                            <li><a href="#">Gallery 2</a>

                            </li>

                            <li><a href="#">Gallery 3</a>

                            </li>
                            <li><a href="#">Gallery 4</a>

                            </li>
                                <li><a href="#">Gallery 5</a>

                                </li>
                        </ul>
                    </li>
                        <li><a href="contact.html">Contact</a>
                    </li>
                </ul>

            </div>
            <!-- end container -->
        </div>
        <!-- end navigation -->
    </nav>

CSS

  body {
background: url(../images/bg.JPG)no-repeat;
margin: 0;
padding: 0;
 }
 /* jumbotron */


 .jumbotron {
background-color: black;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
 }
 /* custom elements */


 .clearfix {
clear: both;
 }
 /* html */

ul {
list-style: none;
margin: 0;
padding: 0;
 }
 /* navigation */


 #primary {
background: rgba(0, 0, 0, 0.7);
height: 75px;
 }

 #primary ul li {}

 #primary ul li a {
color: #FFF;
 }