Sub-menu will not stack vertically - css

Question

I am trying to vertically stack a sub-menu, however, I am having trouble getting it to stack possibly due to some of the parent styling. The goal is for the sub-menu to stack vertically underneath the very first link. Any advice?
JSFIDDLE
CSS
nav {
height: 70px;
background: transparent;
}
nav ul {
display: inline-block;
list-style: none;
height: 70px;
float:right;
}
nav ul li {
display: inline-block;
background: transparent;
float: left;
padding: 0px 10px;
padding-top: 23px;
height: 43px;
border-top: 4px solid $White;
}
nav ul li:first-child {
border-top: 4px solid $White;
}
nav ul li a {
font-family: 'Lato', serif;
font-size: 14px;
color: $TextColor;
line-height: 122%;
letter-spacing: 1.5px;
padding-left: 0;
}
nav ul ul {
display: block;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
}

Answer 1

Man, you really need to learn what you are doing. It was quite some effort to correct your code. For a start, you seem to be unaware of the fact that
nav ul { ... }
will not only affect your outer <ul>, but also your inner <ul id="submenu">.
The fact that you use id="submenu" strongly suggests that the next thing you might be unaware of is that per HTML document, any given id value must be unique, that is it can only be used on one element.
https://jsfiddle.net/gmtugks5/2/