Foundation 6.4 tweaking top bar - css

Question

Foundation's top bar navigation tool is set-up to fully flesh out a hierarchy of links, relying upon list and item tags.
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
However, in an attempt to soften this structure, the goal is to have the second layer links on a single line, say
<ul><li>
One Two Three
</li></ul>
Unfortunately, either display is relinquished to the browser definition for line-item or display:block; from the base code of Foundation overrides even <li style='display: float'><a href="#" style='display: float'> with its .menu a class definition.
How can this one-liner be achieved?

Answer 1

Looks like you may have mixed up your css rules: display: block; and float: none. The default behaviour looks like it wants it to be vertical, and the structure looks to be built in that way. I didn't see anything in their docs for this (I skimmed them lol) but what I did to make it work was to use position:absolute; on that submenu, and then position it. I don't know what the rest of your menu looks like, but you will need to adjust I assume.
I created a codepen that might do what you need it to.
https://codepen.io/bjorniobennett/pen/bGGajWZ
ul.dropdown > li {
position: relative;
&:hover {
> ul.vertical {
display: block;
}
}
> ul.vertical {
display: none;
position: absolute;
width: 500%;
background: #c5c5c5;
top: 120%;
> li {
display: inline-block;
float: left;
}
}
}