Right aligning last nav menu pop up with CSS - css

Question

I'm looking to right align the "pop-up" menu of my nav structure to the right edge of the div. Currently, it is "popping out" of the div. Any suggestions on how to accomplish this?
.main-navigation {
background-color: #2f9fa8;
}
.subMenu li:hover > a {
color: #e3d174;
text-decoration: underline;
}
#GeneralInfo {
width: 160px;
padding-top: 5px;
padding-left: 20px;
}
#Registration {
width: 200px;
padding-top: 5px;
padding-left: 20px;
}
#ScientificPrograms {
width: 175px;
padding-top: 5px;
padding-left: 20px;
}
#SpecialEvents {
width: 110px;
padding-top: 5px;
padding-left: 20px;
}
#Careers {
width: 70px;
padding-top: 5px;
padding-left: 20px;
}
#Exhibits {
width: 90px;
padding-top: 5px;
padding-left: 20px;
}
.subMenu {
width: 200px;
}
#navMenu ul,
#navMenu {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav > li > a {
display: block;
height: 100%;
color: #FFFFFF;
text-decoration: none;
padding: 0;
font-size: 14px;
font-weight: 800;
outline: none;
}
.nav > li > a:hover {
display: block;
height: 100%;
padding: 0;
color: #FFFFFF;
text-decoration: none;
background: #2f9fa8;
}
.nav > li {
padding: 0;
float: left;
height: 30px;
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #2f9fa8;
}
.nav li {
position: relative;
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
z-index: 9999;
}
.nav li > ul > li > a {
text-decoration: none;
color: #FFFFFF;
font-weight: 600;
display: block;
background: #2f9fa8;
text-shadow: none;
padding: 5px 3px 5px 10px;
text-indent: -7px;
}
.nav li:hover > ul {
display: block;
}
<nav class="main-navigation">
<ul id="navMenu" class="nav">
<li id="GeneralInfo"><a class="gradient" href="#">General Information</a>
<ul class="subMenu" id="sub-GeneralInfo">
<li><a href='#'>Annual Meeting</a>
</li>
<li><a href='#'>San Diego, CA</a>
</li>
<li><a href='#'>Supporters</a>
</li>
<li><a href='#'>Just for the Media</a>
</li>
<li><a href='#'>Volunteer</a>
</li>
<li><a href='#'>Awards and Fellowships</a>
</li>
<li><a href='#'>FAQs</a>
</li>
<li><a href='#'>Forms</a>
</li>
<li><a href='#'>Events and Maps</a>
</li>
<li><a href='#'>Meeting Requests</a>
</li>
<li><a href='#'>Visa Information</a>
</li>
<li><a href='#'>Transportation</a>
</li>
<li><a href='#'>Ride Share Program</a>
</li>
<li><a href='#'>Restaurants</a>
</li>
<li class='last'><a href='#'>Top Reasons to Attend</a>
</li>
</ul>
</li>
<li id="Registration"><a class="gradient" href="#">Registration & Housing</a>
<ul class="subMenu" id="sub-Registration">
<li><a href='#'>Online Registration</a>
</li>
<li><a href='#'>Registration Information</a>
</li>
<li><a href='#'>Housing Reservations</a>
</li>
<li class='last'><a href='#'>Room Share Program</a>
</li>
</ul>
</li>
<li id="ScientificPrograms"><a class="gradient" href="#">Scientific Programs</a>
<ul class="subMenu" id="sub-ScientificPrograms">
<!--<li><a href='#'>Submit a Session Proposal</a></li>-->
<li><a href='#'>Submit an Abstract</a>
</li>
<li><a href='#'>Mobile Event App</a>
</li>
<!--<li><a href='#'>Scientific Session Index</a></li>-->
<!--<li><a href='#'>Abstract Author Index</a></li>-->
<!--<li><a href='#'>Abstract Keyword Index</a></li>-->
<li><a href='#'>Continuing Education</a>
</li>
<li><a href='#'>Continuing Medical Education</a>
</li>
<li><a href='#'>Scientific Sessions</a>
</li>
<li><a href='#'>Thematic Approach</a>
</li>
<!--<li><a href='#'>Scientific ePosters</a></li>-->
<li class='last'><a href='#'>Presentation Instructions</a>
</li>
</ul>
</li>
<li id="SpecialEvents"><a class="gradient" href="#">Special Events</a>
<ul class="subMenu" id="sub-SpecialEvents">
<li><a href='#'>Outreach</a>
</li>
<li><a href='#'>Featured Sessions</a>
</li>
<li><a href='#'>Social Events</a>
</li>
<li><a href='#'>Student and Postdoc Scholar Events</a>
</li>
<li><a href='#'>Satellite Meetings</a>
</li>
<li><a href='#'>Meeting Requests</a>
</li>
<li class='last'><a href='#'>Virtual Global Gallery Posters</a>
</li>
</ul>
</li>
<li id="Careers"><a class="gradient" href="#">Careers</a>
<ul class="subMenu" id="sub-Careers">
<li><a href='#'>Career Sessions</a>
</li>
<li><a href='#'>Career Resources and Development Services</a>
</li>
<li class='last'><a href='#'>Job Bank</a>
</li>
</ul>
</li>
<li id="Exhibits"><a class="gradient" href="#">Exhibits</a>
<ul class="subMenu" id="sub-Exhibits">
<li><a href='#'>ToxExpo</a>
</li>
<li><a href='#'>Exhibitor Listing</a>
</li>
<li><a href='#'>Exhibitor-Hosted Session Application</a>
</li>
<li><a href='#'>Exhibitor-Hosted Sessions</a>
</li>
<li><a href='#'>Support Opportunities</a>
</li>
<li class='last'><a href='#'>Supporter Listing</a>
</li>
</ul>
</li>
</ul>
</nav>
You can fint it also in codepen

Answer 1

If you are looking to right align the popup menu .nav li ul to the container "trigger" menu element then you should simply add right: 0; to .nav li > ul
Like:
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
right: 0;
z-index: 9999;
}