如何生成全宽度响应SubMenu？

Question

在这里，我试图在我的菜单中为服务li生成全宽响应子菜单，但我无法生成全宽响应子菜单。 我试图生成的全宽子菜单的一个例子是this.

我目前的代码服务子菜单显示为： 以下是我的代码

<div class="main-nav">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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">
        <h1><img class="img-responsive" src="images/logo.png" alt="logo"></h1>
      </a>                    
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="scroll active"><a href="#home">Home</a></li>
            <li class="scroll dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Service <span class="caret"></span></a>
            <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li class="scroll"><a href="#about-us">About Us</a></li>
            <li class="scroll"><a href="#portfolio">Portfolio</a></li>
            <li class="scroll"><a href="#team">Team</a></li>
            <li class="scroll"><a href="#blog">Blog</a></li>
            <li class="scroll"><a href="#contact">Contact</a></li>
        </ul>
    </div>
  </div>
</div>

任何帮助将受到高度赞赏

Answer 1

我会看看它，但我需要看看CSS。我找到了免费模板，但它没有下拉菜单。所以如果我能看到你的CSS，我可以回复你，看看我能做些什么！ :)

〜丹尼尔

Ps我无法评论，代表不到50。

Answer 2

您可以在此处找到全宽响应菜单：

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

向下滚动以查看更多内容。

你必须使用一些框架，在这种情况下它是bootstrap。如果你想保留你的代码，为我们提供完整的代码片段或jsfiddle链接，否则你似乎希望我们在你的html上创建所有的css / js（有些人会冒犯你的答案）。

希望能帮助到你！