Large menu help adding in another link button

Question

I was looking at the mega menus on the w3schools website: (https://www.w3schools.com/howto/howto_css_mega_menu.asp).

Using the "try it yourself", I was playing around with it, but struggling to see how to add another mega menu or another link button next to the dropdown link.

Can anyone help me out?

Please include the code you have tried so far here. – caffeinated.tech Apr 20 '18 at 15:12 — caffeinated.tech, Apr 20 '18 at 15:12

score 0 · Answer 1 · answered Apr 20 '18 at 14:49

The code which gives you the megamenu is the following:

<div class="dropdown">
<button class="dropbtn">Dropdown 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
  <div class="header">
    <h2>Mega Menu</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>

Hope this is what you were looking for.

Please try to add some code to your question next time. It will be easier and quicker to analyze.

Regards

Sorry I am using the code and preview window on the site but adding another link after the dropdown link doesn't seem to work? So at present it says HOME | NEWS | DROPDOWN and I was trying to add another link after the dropdown link so it shows the following: HOME | NEWS | DROPDOWN | LINK2 — Matt, Apr 20 '18 at 14:54

score 0 · Accepted Answer · answered Apr 20 '18 at 14:58

Please check the code below, might help you:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content .header {
    background: red;
    padding: 16px;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #ccc;
    height: 250px;
}

.column a {
    float: none;
    color: black;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover {
    background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        height: auto;
    }
}

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

thanks this works - i thought i tried this but works now! thanks again! — Matt, Apr 20 '18 at 16:21

Large menu help adding in another link button

2 Answers2