Lining Up Submenu With Menu - html

Question

I'm still relatively new to coding, so this is probably an easy fix.
I have set up menu with 5 menu items, and submenu items under two of the primary menu items. If I line up the first submenu with its menu item, the second one is too far right. If I line up the second submenu with its menu item, the first one is too far right. Is there a way to make both submenus line up under their respective menu items?
Here is the HTML:
<ul id="menu">
<li>Home</li>
<li>About Me
<ul>
<li>Fairfax Psychological Associates</li>
<li>Credentials</li>
</ul></li>
<li>Publications
<ul>
<li>The Wisdom of the Five Messengers</li>
<li>Other Publications</li>
</ul></li>
<li>Location</li>
<li>Strategic Interactions</li>
And this is the CSS:
#menu {
width: 950px;
height:35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #2B297F;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #2B297F;
background-color: #999;
}
#menu li ul
{font-size:15px;
margin-left:-160px;
margin-top:25px;
position:absolute;
text-align:left;
display:none;}
#menu li:hover ul
{display:inline-block;
}
#menu li li
{list-style:none; display:list-item;}
#menu li li a
{color:#2B297F; text-decoration:none;white-space:nowrap;
}
#menu li li a:hover
{color:#2B297F; background-color: #999 text-decoration:none;}
The site is at http://kerryaltmantest.info if you want to see what I mean about the submenu. Thank you!

Answer 1

There are a few changes in css that need to be made:
#menu li ul {
font-size: 15px;
/* margin-left: -160px; REMOVE */
/* margin-top: 25px; REMOVE */
position: absolute;
text-align: left;
top: 30px; /* add this */
left: 0; /* add this */
padding: 0 /* add this */
display: none;
}
#menu li {
display: inline;
padding: 10px;
position: relative; /* add this */
}
The biggest reason that the ul is not positioning properly is because the li it is contained in did not have a position style set. When this happens, absolutely-positioned elements are positioned according to the first ancestor that has a position type set. Additionally, that was apparently not coming into effect because no positioning rules (top/left/bottom/right) were set in the ul. Adding these two things and resetting the margins/padding fixed the issue (css is directly editable/debuggable in chrome's debugger).
https://developer.mozilla.org/en-US/docs/Web/CSS/position:
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used.
Chrome debugging information: https://developer.chrome.com/devtools/index