Make CSS Drop Down Menu 2 Columns

Make CSS Drop Down Menu 2 Columns

2018 edit

Hey, 7 years later the columns css property is well supported

ul{

  columns: 2;

}

<ul>

  <li>first item</li>

  <li>second item</li>

  <li>third item</li>

  <li>fourth item</li>

  <li>fifth item</li>

</ul>

Make CSS Drop Down Menu 2 Columns

2018 edit

Hey, 7 years later the columns css property is well supported

ul{

  columns: 2;

}

<ul>

  <li>first item</li>

  <li>second item</li>

  <li>third item</li>

  <li>fourth item</li>

  <li>fifth item</li>

</ul>

CSS Drop Down Menu: 2 Columns and Headers

Add this code below to the end of your CSS, it will do the trick.

nav li ul li ul {
  position: static;
  width: auto; /*extra new*/
}

nav li ul li ul li {
    float: none;
}

http://jsfiddle.net/u0vyezwh/2/

CSS Responsive Dropdown Menu - Split into 2 Columns

Not an elegant solution but I got this working in two columns for screen sizes above 480px wide.

@media only screen and (min-width: 480px) {
    #cssmenu > ul > li > ul > div {
        width: 200%;
    }
    #cssmenu > ul > li > ul > div > li {
        display: inline-block;
        width: 49%;
        white-space: nowrap;
    }
}

Dropdown menu columns

I've made a snippet with flexboxes and left yours to compare both, feel free to check it out !

The plus side is that the flexboxes will adapt no matter the width, or number of items. And they automatically center the elements when given the right properties !

And no more float left or right, flexboxes handle that pretty easily.

/*Navigation Bar*/

.navbar {

  overflow: hidden;

  background-color: #000000;

  font-family: "Century Gothic";

  height: 40px;

  margin-top: 3px;

}

.navbar a {

  float: left;

  font-size: 15px;

  color: white;

  text-align: center;

  padding: 11px 13px;

  text-decoration: none;

  height: 40px;

}

.dropdown {

  float: left;

  overflow: hidden;

  height: 40px;

}

.dropdown .dropbtn {

  font-size: 15px;

  font-family: "Century Gothic";

  border: none;

  outline: none;

  color: white;

  padding: 11px 13px;

  background-color: inherit;

  height: 40px;

}

.navbar a:hover,

.dropdown:hover .dropbtn {

  background-color: #B64321;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

.dropdown-content a {

  font-size: 13px;

  font-family: "Century Gothic";

  float: none;

  color: black;

  padding: 11px 13px;

  text-decoration: none;

  display: block;

  text-align: left;

}

.dropdown-content a:hover {

  background-color: #F4DDD0;

}

.dropdown:hover .dropdown-content {

  display: block;

}

/* ======================================================= */

.navbar-2 {

  display: flex;

  flex-wrap: nowrap;

  background-color: #000000;

  font-family: "Century Gothic";

  height: 40px;

  margin-top: 50px;

}

.left, .right {

  display: flex;

}

.active-2 {

  background-color: #FB724C;

}

.navbar-2 a {

  flex: 1 1 auto;

  font-size: 15px;

  color: white;

  text-align: center;

  text-decoration: none;

  padding: 0 13px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.navbar-2 a:hover { opacity: 0.8; }

.dropdown-content-2 {

  display: none;

  position: absolute;

  z-index: 1;

  top: 100%;

  background-color: #f9f9f9;

  min-width: 400px;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

.dropdown-2 {

  display: flex;

  position: relative;

}

.spacer { flex: 1 1 auto; }

.dropdown-2:hover .dropdown-content-2 {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: stretch;

  flex-direction: row;

}

.dropdown-content-2 a {

  flex: 1 1 33%;

  font-size: 13px;

  font-family: "Century Gothic";

  color: black;

  padding: 11px 13px;

  text-decoration: none;

  text-align: left;

  box-sizing: border-box

}

<div class="navbar">

  <a class="active" href="Index.html">Home</a>

  <div class="dropdown">

    <button class="dropbtn">Tech 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Apple <i class="fa fa-apple"></i></a>

      <a href="#">Android <i class="fa fa-android"></i></a>

      <a href="#">Computers <i class="fa fa-desktop"></i></a>

      <a href="#">Drones <i class="fa fa-camera"></i></a>

      <a href="#">Photography <i class="fa fa-camera"></i></a>

      <a href="#">TVs <i class="fa fa-"></i></a>

    </div>

  </div>

  <a href="Subscription.html">Subcription</a>

  <a href="#news">About Us</a>

  <a href="#news">Contact</a>

  <a style="float:right" href="#Sign Up">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a>

  <a style="float:right" href="#Log In">Log in <i class="fa fa-sign-in" aria-hidden="true"></i></a>

</div>

<!-- ===================================================================== -->

<div class="navbar-2">

  <div class="left">

    <a class="active-2" href="Index.html">Home</a>

    <div class="dropdown-2">

      <a href="#tech" class="dropdown-2">Tech</a>

      <div class="dropdown-content-2">

        <a href="#">Apple <i class="fa fa-apple"></i></a>

        <a href="#">Android <i class="fa fa-android"></i></a>

        <a href="#">Computers <i class="fa fa-desktop"></i></a>

        <a href="#">Drones <i class="fa fa-camera"></i></a>

        <a href="#">Photography <i class="fa fa-camera"></i></a>

        <a href="#">TVs <i class="fa fa-"></i></a>

      </div>

    </div>

    <a href="Subscription.html">Subcription</a>

    <a href="#news">About Us</a>

    <a href="#news">Contact</a>

  </div>

  

  <span class="spacer"></span>

  

  <div class="right">

    <a href="#Sign Up">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a>

    <a href="#Log In">Log in <i class="fa fa-sign-in" aria-hidden="true"></i></a>

  </div>

</div>

second column in drop down menu list in navigation bar

You can place it by wrapping the .dropdown-content div with a flexbox.

I have added .wrapper a class you can change it to whatever you like.
Here is the code:

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}

li {

    float: left;

}

li a, .dropbtn {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn {

    background-color: red;

}

li.dropdown {

    display: inline-block;

}

.wrapper {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    text-align: left;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .wrapper{

  display: flex;

  justify-content: center;

}

<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li class="dropdown">

    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>

    <div class="wrapper">

      <div class="dropdown-content">

        <a href="#">Link 1</a>

        <a href="#">Link 2</a>

        <a href="#">Link 3</a>

      </div>

      <div class="dropdown-content">

        <a href="#">demo </a>

        <a href="#">demo</a>

        <a href="#">demo</a>

      </div>

    </div>

  </li>

</ul>

How to make drop down show 2 columns

You will need to use wrapper div or specified class after number of elements.

e.g.

<ul class="dropdown-menu">
      <li class="left-side"><a href="page.php">Introduction</a></li>
      <li><a href="page.php">Getting Started</a></li>
      <li><a href="page.php">Search Engines</a></li>
      <li><a href="page.php">Keywords</a></li>
      <li><a href="page.php">Tracking Traffic Sources</a></li>
      <li><a href="page.php">Forum Marketing</a></li>
      <li><a href="page.php">Creating a Newsletter</a></li>
      <li><a href="page.php">Email Signatures</a></li>
      <li><a href="page.php">Introduction to Articles</a></li>
      <li><a href="page.php">List Swaps</a></li>
      <li class="right-side"><a href="page.php">Article Marketing 2.0</a></li>
      <li><a href="page.php">Autoresponder Swaps</a></li>
      <li><a href="page.php">Online Giveaways</a></li>
      <li><a href="page.php">Latest Traffic Stats</a></li>
      <li><a href="page.php">Newsletter Contributor</a></li>
      <li><a href="page.php">Social Bookmarking</a></li>
      <li><a href="page.php">Classified Ads</a></li>
      <li><a href="page.php">Google Alerts and Omgili</a></li>
      <li><a href="page.php">Video Marketing</a></li>
      <li><a href="page.php">H.A.R.O</a></li>

 </ul>

---

Related Topics