Dropdown menu floating left
<p>I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
  float: right;
  border-radius: 15px;
  margin-right: 15%;
}
nav ul {
  list-style-type: none;
  margin-top: 55px;
  background-color: black;
}
nav li {
  display: inline-block;
  position: relative;
  padding: 10px;
}
nav li ul {
  display: none;
}
nav li li {
  display:
}
nav li:hover ul {
  display: block;
}
nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
nav li:hover {
  background-color: gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="geschiedenis.html"&gt;Fruitsoorten&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="team.html"&gt;Kersen&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="team.html"&gt;Appels&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="team.html"&gt;Pruimen&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;li&gt;
    &lt;li&gt;&lt;a href="team.html"&gt;Team&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="agenda.html"&gt;Agenda&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="fotos.html"&gt;Foto's&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="vacatures.html"&gt;Vacatures&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>