I want to implement this functionality:

[![enter image description here](https://i.stack.imgur.com/o4Fon.png)](https://i.stack.imgur.com/o4Fon.png).

Here is a fiddle of what I have so far: <https://jsfiddle.net/vvevq2c3/>

Below is the code I have tried without any luck:

**ATTEMPT 1**

```
<ul class="nav navbar-nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Personal 
         <span class="caret"></span>
      </a>

      <ul class="dropdown-menu">
         <div class="row">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
            <li><a href="#">Separated link</a></li>
          </div>
       </ul>
    </li>
</ul>

```

**ATTEMPT 2**

```
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
       <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal 
             <span class="caret"></span>
          </a>

          <div class="row">
              <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                  <li><a href="#">Separated link</a></li>
               </ul>
           </div>
        </li>
    </ul>

```

**ATTEMPT 3** 

```
<div class="row">
   <ul class="dropdown-menu">
      <div class="span6">
         <div class="mycontent-left">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
         </div>
      </div>

       <div class="span6">
          <div class="mycontent-right">
             <li><a href="#">Separated link</a></li>
             <li><a href="#">One more separated link</a></li>
             <li><a href="#">Separated link</a></li>
          </div>
        </div>
      </div>
    </ul>

```

Does anyone have ideas on how to achieve this functionality?

**UPDATE**

With the help of the answers, I was able to align the dropdown menu content horizontally. Here is the modified code:

```
<!doctype html>
<html>
  <head>
    <title> Paypal </title>

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "../css/paypal.css">

    <script src = "https://code.jquery.com/jquery-2.1.4.min.js"> </script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
  </head>

  <body>
    <nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Paypal </a>
    </div>
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Personal <span class="caret"></span></a>
                  <div class="dropdown-menu row">
                    <ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li ><a href="#">Pay on eBay</a></li>
                        <li><a href="#">Pay on websites</a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Pay in apps</a></li>
                        <li><a href="#">Pay in stores</a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">More ways to use us</a></li>
                      </ul>
                    </ul>
              </div>
          </li>
      </ul>

      <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Business <span class="caret"></span></a>
                  <div class="dropdown-menu row">
                    <ul class="list-unstyled col-lg-12 col-sm-12" role="menu">
                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li ><a href="#">All business solutions</a></li>
                        <li><a href="#">Get paid on your website </a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Get oaid on the go  </a></li>
                        <li><a href="#">Get paid in your store </a></li>
                      </ul>

                      <ul class="col-lg-4 col-sm-6 list-unstyled">
                        <li><a href="#">Get paid in your app  </a></li>
                        <li><a href="#">Email an invoice </a></li>
                      </ul>
                    </ul>
              </div>
          </li>
      </ul>

      <ul class="nav navbar-nav">
            <li class="dropdown megamenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Send <span class="caret"></span></a>
                <div class="dropdown-menu row" class="col-lg-6">
                  <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Please enter your email or number">
                  </div>

                    <div class="input-group">
                      <input type="text" class="form-control" aria-label="...">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div><!-- /btn-group -->
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
</nav>

    <script src = "../javascript/Paypal.js"> </script>
  </body>
</html>

```

`paypal.css`

```
@media screen and (min-width: 768px) {

  .megamenu ul {
     padding-bottom:15px;
  }

  .megamenu ul:not(:last-of-type) {
     border-right:1px solid #ccc;
  }

  .megamenu > .dropdown-menu {
     min-width:800px;
  } 

  .megamenu ul {
     padding-bottom:15px;
  }

}

ul {
    margin-top: 0.5%;
}

#exampleInputEmail1 {
    width : 50%;
    margin-left: 3%;
    margin-top: 2%;
}

.input-group {
    width : 50%;
    margin-left: 3%;
    margin-bottom: 2%;
}

```

`paypal.js`

```
var paypal = (function ($) {
    'use strict';

    return {
        stopPaypal : function () {
            $('.dropdown-menu').on('click', function (e) {
                e.stopPropagation();
            });
        }
    };

}(jQuery));

paypal.stopPaypal();

```