Drop down menu is misaligned, why?

Question

I've tried to create a drop down menu navigation where the drop down content is revealed after hovering over the navigation button.

Unfortunately, the drop down list end up vertical with odd sizing.

Could you please explain to me what I've done wrong and how the resolution works?

JSFIDDLE https://jsfiddle.net/bttjb72x/

body,
html {
  margin: 0;
  padding: 0;
}
#nav {
  width: 100%;
  position: fixed;
  margin: 0;
  padding: 0;
  text-align: center;
}
#nav ul {
  width: 100%;
  overflow: hidden;
  display: inline-block;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
#nav ul li {
  text-transform: uppercase;
  color: black;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  text-align: center;
  display: inline-block;
}
#nav ul li a {
  text-decoration: none;
  color: black;
  font-size: 20px;
  text-align: center;
  height: 100%;
  padding: 10px;
  display: block;
}
#nav ul a:hover {
  text-decoration: none;
  color: white;
  background: rgba(25, 255, 25, 1);
  font-size: 20px;
  display: inline-block;
  text-align: center;
}
#nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}
#nav ul ul li {
  width: 200px;
  background-color: red;
}
#nav ul ul a {
  padding: 10px 15px
}
#nav ul li:hover > ul {
  display: inline-block;
}

<nav id="nav">
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Contacts</a>
        </li>
        <li><a href="#">End</a>
        </li>
        <li><a href="#">Browse</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Browse</a>
    </li>
    <li><a href="#">Contacts</a>
    </li>
    <li><a href="#">End</a>
    </li>
    <li><a href="#">Browse</a>
    </li>
    <li><a href="#">Contacts</a>
    </li>
    <li><a href="#">End</a>
    </li>
  </ul>

</nav>