Search code examples
htmlcsszurb-foundationsubmenu

How to make Foundation 5 top-bar submenu's inline?

Is it possible to make subnav menu items under the Foundation 5 top-bar display inline/horizontally as compared to the default vertical stack?

I've been changing css properties in Chrome for hours to no avail and have been unable to locate and supporting documentation. Any help is appreciated.

I want to make this (default):
enter image description here

To this:
enter image description here

Solution

  • Well assuming your html structure is like this - foundation structure for drodown men

     <li class="has-dropdown hover"><a href="#">Main Item 1</a>
     <ul class="dropdown">
          <li><a href="#">Dropdown Level 2a</a></li>
          <li><a href="#">Dropdown Level 2b</a></li>
     </ul>
      </li>
    </ul>

    you must first change the width of the ul dropdown which is 100% - enough space to float the level2a and b

    .top-bar-section .dropdown {width:xxx}

    then you change the width of ul dropdown li which is also 100% from to be smaller and float inside uldropdown

     .top-bar-section .dropdown li {width:xxx}

    and viola!