简体   繁体   中英

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):
在此处输入图片说明

To this:
在此处输入图片说明

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!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM