[nurries]

I've been trying to code a drop down menu with multiple columns and levels but it seems a bit out of my skill level.

This is what I'm aiming for:

[img]http://s18.postimg.org/ve4ak2j9l/Screenshot_2015_02_24_18_24_57.png[/img]


Thanks in advance for any help!

[Sakuto]

So what are you really looking for ? Tutorial, something to make it for you ?
Just inspect the code and watch how it's done.

[nurries]

A tutorial or at least some guidance in the right path would be helpful. I tried inspecting the css but I still didn't understand it well.

[Sakuto]

What have you done yet ? Show us your progress and the problem you encounteer.

[nurries]

This is what I have done so far. I want to add another column to the right saying 'Samsung' with the following sub categories (ie. Note 3, Note 4, S5 etc.) But I want it under the same dropdown menu 'shop'.

[img]http://s17.postimg.org/bre5j1qpr/Screenshot_2015_02_24_19_52_43.png[/img]

This is my code:

Code

<header id="header"><!--header-->
        <div class="header_top"><!--header_top-->
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="contactinfo">
                        <ul class="nav nav-pills nav navbar-nav collapse navbar-collapse">
                        <li><a href="#"><i class="fa fa-phone"></i> +0 12 34 56 789</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> [email protected]</a></li>
<!--Dropdown menu starts here--><li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
      <ul role="menu" class="sub-menu">
      <li><a href="#">Apple</a></li>
                        <li><a href="#">iPhone 6</a></li>
                        <li><a href="#">iPhone 6 Plus</a></li>
                        <li><a href="#">iPad Air</a></li>
                        <li><a href="#">iPad Mini</a></li>
      </ul>
                        </ul>
                        </div>
                    </div> [/code]

[Sakuto]

Code

<ul>
    <li>Samsung

    <ul>
      <li>GS3</li>
      <li>GS4</li>
    </ul>
    </li>

    <li>Apple

    <ul>
      <li>4S</li>
      <li>5</li>
    </ul>
    </li>
</ul>

Make something like this and stylize it.

[ℬasic]

I will send over a PM to you ninopino1

[nurries]

Code

<ul>
    <li>Samsung

    <ul>
      <li>GS3</li>
      <li>GS4</li>
    </ul>
    </li>

    <li>Apple

    <ul>
      <li>4S</li>
      <li>5</li>
    </ul>
    </li>
</ul>

Make something like this and stylize it.

I'll have a look into that and give it a shot. Thanks for your help thus far.

I will send over a PM to you ninopino1

Thank you, would really appreciate that!