vertically centred horizontal navigation

Question

As a HTML/CSS newbie, I am trying to create a centered horizontal main menu with vertical drop down submenus. The submenus are supposed to perfectly align with the parent main menu element. Cannot attach picture due to lack of reputation points, but have a visualization in case that could help anyone.

In my current set-up, the submenu items (Directions and Google Maps) are aligned completely to the left and I cannot get them nicely under the main menu item (Location). I believe the solution lies with the absolute/relative positioning of elements, but I cannot figure out how to implement it without destroying the general layout.

Finally, the sub-menu boxes should all have the same width, while the main menu items can vary according to their normal length.

The end result would be similar to this example, unfortunately the code for it gives a 404 error.

This is my HTML:

#nav {
  color: orange;
  list-style: none;
  font-weight: bold;
  text-align: center;
  border: 1px solid orange;
  border-width: 1px 0;
}
#nav li {
  display: inline;
}
#nav a {
  display: inline-block;
  padding: 1ex;
  text-decoration: none;
  color: orange;
}
#nav a:hover {
  text-decoration: none;
  color: white;
  background-color: orange;
}
#nav li ul {
  display: none;
  list-style: none;
  position: absolute;
}
#nav li ul li {
  display: block;
  border-bottom: 1px solid orange;
  border-width: 1px 0;
  text-align: left;
}
#nav li:hover ul {
  display: block;
}

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="location.html">Location</a>
    <ul>
      <li><a href="location.html#directions">Directions</a>
      </li>
      <li><a href="location.html#maps">Google Maps</a>
      </li>
    </ul>
  </li>
  <li><a href="pictures.html">Pictures</a>
  </li>
  <li><a href="pricesandavailability.html">Prices &amp; Availability</a>
  </li>
  <li><a href="generalinfo.html">General Info</a>
  </li>
  <li><a href="reservationsandcontact.html">Reservations &amp; Contact</a>
  </li>
</ul>

Apologies for the newbie requests & cheers to all for helping!

Answer 1

Parent(#nav li) must be positioned relatively.

Initially ul renders with some padding, you should add padding: 0 to get proper alignment.

#nav {
  color: orange;
  list-style: none;
  font-weight: bold;
  text-align: center;
  border: 1px solid orange;
  border-width: 1px 0;
  padding: 0;
}
#nav li {
  display: inline;
  position: relative;
}
#nav a {
  display: inline-block;
  padding: 1ex;
  text-decoration: none;
  color: orange;
}
#nav a:hover {
  text-decoration: none;
  color: white;
  background-color: orange;
}
#nav li ul {
  display: none;
  list-style: none;
  position: absolute;
  padding: 0;
  left: 0;
}
#nav li ul li {
  display: block;
  border-bottom: 1px solid orange;
  border-width: 1px 0;
  text-align: left;
}
#nav li:hover ul {
  display: block;
}

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="location.html">Location</a>
    <ul>
      <li><a href="location.html#directions">Directions</a>
      </li>
      <li><a href="location.html#maps">Google Maps</a>
      </li>
    </ul>
  </li>
  <li><a href="pictures.html">Pictures</a>
  </li>
  <li><a href="pricesandavailability.html">Prices &amp; Availability</a>
  </li>
  <li><a href="generalinfo.html">General Info</a>
  </li>
  <li><a href="reservationsandcontact.html">Reservations &amp; Contact</a>
  </li>
</ul>