大菜单有助于添加另一个链接按钮

时间:2018-04-20 14:39:09

标签: html css megamenu

我正在查看w3schools网站上的大型菜单:(https://www.w3schools.com/howto/howto_css_mega_menu.asp)。

使用"try it yourself",我正在玩它,但很难看到如何在dropdown链接旁边添加另一个超级菜单或其他链接按钮。

任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

为您提供megamenu的代码如下:

followed_stocks

希望这就是你要找的东西。

请在下次尝试为您的问题添加一些代码。分析会更容易,更快捷。

此致

答案 1 :(得分:0)

请检查下面的代码,可能会对您有所帮助:



<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  
  <!-- START FIRST DROPDOWN -->
  <div class="dropdown">
    <button class="dropbtn">First Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu - first dropdown</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- END FIRST DROPDOWN -->
  
  <!-- START SECOND DROPDOWN -->
  <div class="dropdown">
    <button class="dropbtn">Second Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu - second dropdown</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
  <!-- END SECOND DROPDOWN -->
</div>
&#13;
{{1}}
&#13;
&#13;
&#13;