My submenu not aligned with nav - html

Question

nav#primary_topmenu {
position: fixed;
z-index: 5;
width: 1300px;
top:0%;
text-align: center;
}
#topnav{
height: 85px;
background: rgba(29, 15, 6, 0.7);
width: 1300px;
}
#logotop img {
float:left;
margin-top: 5px;
}
nav#primary_topmenu a {
text-decoration: none;
text-indent: -9999px;
color: #fff;
}
nav#primary_topmenu li {
display:block;
font-size: 1.2em;
padding: 1em;
font-weight: 900;
font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
text-align: center;
height: 3em;
display:table-cell;
vertical-align: middle;
/*border: solid 1px #fff;*/
}
nav#primary_topmenu ul {
display: inline-block;
height: 85px;
box-shadow: 0 0 25px rgba(0,0,0,0.3);
background: rgba(29, 15, 6, 0.7);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/
}
nav#primary_topmenu li:hover {
border-bottom: 4px solid #cd4650;
}
nav#primary_topmenu a:hover {
color: #cd4650;
}
/*---- dropdown menu----*/
nav#primary_topmenu ul ul {
display: none;
position:fixed;
top:88px;
height:61px;
padding:0;
margin: 0;
}
nav#primary_topmenu ul ul li {
float:none;
display: block;
height:20px;
font-weight: normal;
font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
border: 1px solid rgba(150,150,150,0.1);
box-shadow: 0 0 25px rgba(0,0,0,0.3);
background: rgba(29, 15, 6, 0.7);
}
nav#primary_topmenu ul li:hover > ul{ /*when hovering the parents please show the child*/
display:block;
padding:0;
margin: 0;
}
nav#primary_topmenu ul ul li a:hover {
list-style-type: none;
}
<div id="topnav">
<nav id="primary_topmenu">
<ul>
<div id="logotop"><img src="images/coincopy.png">
<li>
<a class="introduction" href="#primary_topmenu li">Home</a>
</li>
<li>
<a class="background" href="#background">Mission</a>
</li>
<li>
<a class="ira" href="#ira">Fund <br>Placement</a>
</li>
<li>
<a class="corporate" href="#corporate">Corporate <br>Finance</a>
</li>
<li>
<a class="investment" href="#investment">Renewable <br> Energy</a>
</li>
<li>
<a class="consulting" href="#consulting">Team</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
</ul>
</li>
<li>
<a class="consulting" href="#consulting">Other <br>Services</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
</ul>
</li>
<li>
<a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
</li>
<li>
<a class="principal" href="#principal">Connections</a>
</li>
</div>
</ul>
</nav>
</div>
I try to align my submenu so that it is align exactly under the parents. Whenever I hover with the mouse to for example "Team" the submenu appear, but not align exactly where Team menu start.
I think it is because I have padding: 1em; at the nav#primary_topmenu li.
But then I have tried to add margin-left:-15px on nav#primary_topmenu ul ul in css, but it did not move.
How do I solve this? I tried to put padding: 0 and Margin:0 at the submenu li, but does not help...Please help me.

Answer 1

I think I got this figured out ;).
The problem appears to be the "padding: 1em;" at the "nav#primary_topmenu li". As you expected. It moved the list by 1em to the right.
Your own solution didn't work because "nav#primary_topmenu ul li:hover > ul" resets the margins to 0 and overwrites your solution.
So the solution was simple. Add the "margin-left: -1em;" to "nav#primary_topmenu ul li:hover > ul" instead of "nav#primary_topmenu ul ul".
This is the fiddle (fullscreen)
This is the fiddle with code
PS: I also did a little fix to the moving navigation (last line of the css)
HTML
<ul>
<div id="logotop"><img src="images/coincopy.png">
<li>
<a class="introduction" href="#primary_topmenu li">Home</a>
</li>
<li>
<a class="background" href="#background">Mission</a>
</li>
<li>
<a class="ira" href="#ira">Fund <br>Placement</a>
</li>
<li>
<a class="corporate" href="#corporate">Corporate <br>Finance</a>
</li>
<li>
<a class="investment" href="#investment">Renewable <br> Energy</a>
</li>
<li>
<a class="consulting" href="#consulting">Team</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
</ul>
</li>
<li>
<a class="consulting" href="#consulting">Other <br>Services</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
<li>Sub Menu 1</li>
<li>Sub Menu </li>
</ul>
</li>
<li>
<a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
</li>
<li>
<a class="principal" href="#principal">Connections</a>
</li>
</div>
</ul>
</nav>
</div>
CSS
nav#primary_topmenu {
position: fixed;
z-index: 5;
width: 1300px;
top:0%;
text-align: center;
}
#topnav{
height: 85px;
background: rgba(29, 15, 6, 0.7);
width: 1300px;
}
#logotop img {
float:left;
margin-top: 5px;
}
nav#primary_topmenu a {
text-decoration: none;
text-indent: -9999px;
color: #fff;
}
nav#primary_topmenu li {
display:block;
font-size: 1.2em;
padding: 1em;
font-weight: 900;
font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
text-align: middle;
height: 3em;
display:table-cell;
vertical-align: middle;
/*border: solid 1px #fff;*/
}
nav#primary_topmenu ul {
display: inline-block;
height: 85px;
box-shadow: 0 0 25px rgba(0,0,0,0.3);
background: rgba(29, 15, 6, 0.7);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/
}
nav#primary_topmenu li:hover {
border-bottom: 4px solid #cd4650;
}
nav#primary_topmenu a:hover {
color: #cd4650;
}
/*---- dropdown menu----*/
nav#primary_topmenu ul ul {
display: none;
position:fixed;
top:88px;
height:61px;
padding:0;
margin:0;
}
nav#primary_topmenu ul ul li {
float:none;
display: block;
height:20px;
font-weight: normal;
font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
border: 1px solid rgba(150,150,150,0.1);
box-shadow: 0 0 25px rgba(0,0,0,0.3);
background: rgba(29, 15, 6, 0.7);
}
nav#primary_topmenu ul li:hover > ul{ /*when hovering the parents please show the child*/
display:block;
padding:0;
margin: 0;
margin-left: -1em; /*the dropdown displayed too much to the right because of the 1em padding in nav#primary_topmenu li. This moves the dropdown back by the same amount. */
}
nav#primary_topmenu ul ul li a:hover {
list-style-type: none;
}
nav#primary_topmenu ul li{
border-bottom: 4px solid transparent; /*prevents navigation from moving when applying the bottom border on hover*/
}