如何从引导程序模板编辑导航栏并将其转换为具有相同设计的下拉列表？

Question

How to edit navbar from bootstrap templates and convert it into dropdown with same design? I want it like when I hover on the word that it will show the same color as the background color of the navbar

 <nav id="mainNav" 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="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="#about">Log In</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

This is the part that I want to convert into a dropdown with same design. I don't need the page-scroll on this part and the href coz I want the things in the dropdown to have the href. What do I need to do?

   <li><a class="page-scroll" href="#about">Log In</a></li>

Answer 1

You can easily implement by implementing data-toggle dropdown

 <li>
      <div class="dropdown">
          <a href="#" class="btn btn-simple dropdown-toggle" data-toggle="dropdown" style="line-height:2.428571;">
              Log in
              <b class="caret"></b>
          </a>
      <ul class="dropdown-menu">
           <li><a href="about-us.html">About Us</a></li>
           <li><a href="about-gbg.html">About GBG</a></li>
      </ul>
      </div>
</li>

Demo : https://jsfiddle.net/ez2tacju/