Zurb Foundation framework not working properly - html

Question

I'm trying to make a neat little responsive website and I come across consistent problems, and I can't seem to be able to pinpoint the problem.
Whenever I'm making a menu and use or other elements, they turn into plain html e.g.: all list elements will have bullets and be simply plain text, without any background.
Attached is an example image:
My code for this is:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Here is another example:
And my code is:
<div class="row" style="float: right; display: table-cell;vertical-align: middle;">
<button type="button"
id="voltage_button"
onclick="measureVoltage();">
Voltage
</button>
<button type="button"
id="octiv_current_button"
onclick="measureCurrent();">
Current
</button>
<button type="button"
id="phase_button"
onclick="measurePhase();">
Phase
</button>
</div>

Answer 1

Im not sure what you want exactly, and it's kinda difficult to understand what you want, but as far as I understand, you want the bullet points to disappear and also inlining the menu.
HTML:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Web</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>Voltage</li>
<li>Current</li>
<li>Phase</li>
</ul>
</li>
</ul>
</section>
</nav>
JS:
$(document).foundation();