Create a Multi-Column Dropdown

[Cameron8]

I am trying to create a multi-column drop-down on my navigation bar, and I am at a wall with regards to how to set up my liquid code.

We where able to achieve the affect in chrome using developer tools, but modifying from the front end is a lot easier than through the back end liquid. We essentially want to combine two link lists into a single drop-down, or if necessary, combine the links into one large link list, and create a way to display the list split into two separate divs. Since the Navigation & link lists are generated through liquid, I honestly have no idea where to start.

If anybody has any thoughts, or has seen examples of this done through liquid, I'd love to hear about it.

Thanks
 

Update: I've uploaded some screenshots for a visual representation of what we're trying to achieve with our drop downs.

This first image is what our dropdown menu currently looks like. The goal is to combine the link lists of "Brushes" with the list of "Brush Kits".

This is the effect we're trying to create. This was done through Chrome's developer tools allowing us to modify the code from the front end.
If we can figure out how to achieve this through Liquid, we would be solid. 

Here are the two liquid snippets that our theme is using to generate the navigation bar. 

navigation.liquid

{% if settings.nav_linklist != '' %}
<nav class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <div class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar-group">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </span>
        <span>Menu</span>
      </div>

      <div class="nav-collapse collapse"> 
        <ul class="nav hoverMenuWrapper">
          {% for l in linklists.[settings.nav_linklist].links %}
          {% include 'navigation-link' with 'top' %}
          {% endfor %}
        </ul>       
      </div>
    </div>
  </div>
</nav>
{% endif %}

navigation-link.liquid

{% if l.title == 'Tutorials' %}
<hr style="margin:10px 0;">
{% endif %}
{% assign submenu = l.title | handleize %}
<li class="{% if l.active %}active{% endif %}{% if linklists[submenu].links.size > 0 %} dropdown{% unless navigation-link == 'top' %}-submenu{% endunless %}{% endif %}" style="{% if l.title == 'Tutorials' %} margin-bottom:0px;{% endif %}">
  {% if linklists[submenu].links.size > 0 %}
  <a href="{{ l.url }}" class="dropdown-toggle dropdown-link" data-toggle="dropdown">
    
    {% if navigation-link == 'top' %}
    <h4>
      {{ l.title }}
      <i class="icon-caret-down"></i>
    </h4>
    
    <span class="bg-down visible-desktop"></span>
    {% else %}
    {{ l.title }}
    {% endif %}
    
  </a>
  <ul class="dropdown-menu list-styled" style="display: none;">
    {% for l in linklists[submenu].links %}
    {% include 'navigation-link' with 'child' %}
    {% endfor %}
  </ul>
  {% else %}
  <a href="{{ l.url }}">
    
    {% if navigation-link == 'top' %}
    <h4>{{ l.title }}</h4>
    
    <span class="bg-down visible-desktop"></span>
        
    {% else %}
    {{ l.title }}
    {% endif %}
    
  </a>
  {% endif %}
</li>

[Stas__99rabbits]

+1

[Cameron8]

I've edited the main post to include image mock-ups of the desired outcome, as well as the liquid code used by our theme to generate our current navigation bar.

Any tips or ideas are greatly appreciated. 
 

Thanks

[metagals]

Can you include the code that you used in Chrome's developer tools to create the desired outcome?