CSS - hover ul items not in vertical line

I'm brand new to HTML and CSS, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.

I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...

I would be so grateful for some suggestions! :)

* {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 10px;
}

/* ----- NAVIGATION BAR ----- */

#nav {
  width:500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  background-color: none;
}

#nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}

#nav ul:after{
  content: "";
  clear: both;
  display: block;
}

#nav ul li {
  float: left;
}

#nav ul li a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    font-family: "Trocchi", serif;
}

#nav ul li:hover {
  background: #76C5CF;
}

#nav ul li:hover a {
  color: white;
}

#nav ul ul {
  display: none;
  background: none;
  position: absolute;
  top: 100%;
}

#nav ul li:hover > ul {
  display: block;
}

/* ----- HEADER ----- */

#header {
  width: 340px
  margin: auto;
  margin-top: 10px;
  text-align: center;
}

#header h1 {
  height: 50px;
  font-family: "Trocchi", serif;
  background-color:
}

#header h2 {
  font-family: "Trocchi", serif;
  position: relative;
  display: inline;
}

/* ----- BACKGROUND ----- */
body {
  background-color: #A6D7F3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title> Harley's Haunts </title>
  <link rel="stylesheet" type="text/css" href="harleysHaunts.css">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Trocchi');
  </style>
</head>

  <body>

      <div id="header">

        <h1> HARLEY'S HAUNTS </h1>
        <h2> It's a dog's world after all </h2>

      </div>

      <div id="nav">
        <ul>
          <li><a href="#"> About </a></li>
          <li><a href="#"> Pet-Friendly Venues </a>
            <ul>
              <li><a href="#"> Cafes </a> </li>
              <li><a href="#"> Restaurants </a> </li>
              <li><a href="#"> Pubs/Bars </a> </li>
              <li><a href="#"> Shops </a> </li>
            </ul>
          </li>
          <li><a href="#"> Contact </a></li>
        </ul>


      </div>

  </body>

</html>

Solution

All you have to do is add position:relative to #nav ul li :

#nav ul li {
        float: left;
        position: relative;
    }

but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.

So your css will become like this

#nav > ul > li {
     float: left;
     position: relative;
}