Java 如何从引导模板编辑导航栏，并将其转换为具有相同设计的下拉菜单？

如何从引导模板编辑导航栏，并将其转换为具有相同设计的下拉菜单？我希望当我在单词上悬停时，它将显示与导航栏背景色相同的颜色

 <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>

切换导航菜单

---

这是我想转换成具有相同设计的下拉列表的部分。我不需要这部分的页面滚动条和href，因为我希望下拉列表中的内容有href。我需要做什么

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

以下是我如何做到这一点的示例：

<li class="nav navbar-nav navbar-right dropdown">
<a href="#" class="btn btn-info" data-toggle="dropdown" role="button" aria-expanded="false">
    Text
</a>

<ul class="nav navbar-nav navbar-right" role="menu">
    <li>
        <a href="???">
            Text
        </a>
    </li>
</ul>

---

也可能是page scroll类使按钮看起来像它一样

<li class="nav navbar-nav navbar-right dropdown">
<a href="#" class="btn btn-info" data-toggle="dropdown" role="button" aria-expanded="false">
    Text
</a>

<ul class="nav navbar-nav navbar-right" role="menu">
    <li>
        <a href="???">
            Text
        </a>
    </li>
</ul>

---

也可能是page scroll类使按钮看起来像它一样

您可以通过实现数据切换下拉菜单轻松实现

 <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>

---

演示：

您可以通过实现数据切换下拉菜单轻松实现

 <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>

---

演示：

尝试为li元素指定类“dropdown”：

然后

• 项1
• 项2

我不需要在要进行下拉的部分上滚动页面。我需要做什么@Haroldscholtz尝试将类“dropdown”指定给li元素：

然后

• 项1
• 项2

我不需要在要进行下拉的部分上滚动页面。我需要做什么@Haroldscholtz当我尝试这个时，它的设计是不同的，它被一个蓝色的泡泡包裹着。有没有可能使它成为相同的设计？你需要设计它的样式或将设计类添加到元素中。我对设计很在行。你能解释一下吗@harold Scholtz您需要检查哪个类给出了您所指的蓝色气泡。我想可能是这样的：导航导航栏导航栏对，我会编辑我的答案，包括这些，供你测试。当我尝试这个时，设计是不同的，它被一个蓝色的泡泡包裹着。有没有可能使它成为相同的设计？你需要设计它的样式或将设计类添加到元素中。我对设计很在行。你能解释一下吗@harold Scholtz您需要检查哪个类给出了您所指的蓝色气泡。我想可能是这样的：导航导航栏导航栏对，我会编辑我的答案，包括这些供你们测试