0

I'm using zurb foundation's dropdown menu. I need the dropdown lists to display as inline-block. So far, I haven't any foundation rules that do this. I need help

 <html>
  <head>
    <!--foundation styles-->

   <style type="text/css">
    .custom-menu{
     display:inline-block;
    }
   </style>
  </head>
  <body>
   <div class="row text-center">
     <ul class="dropdown menu custom-menu" data-dropdown-menu>
       <li><a href="#">Item One</a>
         <ul class="menu">  
           <!-- I want to display the lists here as inline
block-->
            <li><a href="#">Item One A</a></li>
            <!--more Links-->
         </ul>
       </li>
       <li><a href="#">Item Two</a></li>
     </ul>
   </div>
   <!--foundation scripts-->
  </body>
</html>
  • Kwasi, do you mean you want it to drop down like the top bar here: http://zurb.com/building-blocks/f6-top-bar – Chris O Mar 24 '16 at 19:34
  • No.I am creating a theme for osclass classfieds site. I am using the dropdown menu to create the categories.Each category has many sub-categories. When I hover the mouse over the main category, I want the sub-categories to display as inline-block. You can also see this site http://www.seekout.us/ and hover the mouse over the main categories and see how the sub-categories are displayed. For my menu, I want to display the main categories horizontally. Thanks –  Mar 25 '16 at 03:55
  • sorry I haven't seen any pre-built functions to do what you want. There is the dropdown pane which could work if you modify the code. Check it out, if you can't find anything else this may be the way to go. http://foundation.zurb.com/sites/docs/kitchen-sink.html#dropdown-pane – Chris O Mar 25 '16 at 13:57
  • Kwasi, BTW, you may want to edit your title to identify you are interested in a solution for Foundation 6 otherwise you may get answers for the wrong version (even though you tagged 6). – Chris O Mar 25 '16 at 14:04

0 Answers0