Menu icon Foundation
Problem with dropdown menu

I had a tough time trying to center menu in a div container. I did it finally, I'm not sure if that is the best way. Now I have another hurdle displaying the dropdown menu as inline-block or table.

Here is the entire code.

<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>

dropdown menuinline-blockdisplay

I had a tough time trying to center menu in a div container. I did it finally, I'm not sure if that is the best way. Now I have another hurdle displaying the dropdown menu as inline-block or table.

Here is the entire code.

<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>