Align sub-nav ul with parent li

Hi,

I’m struggling here with my navigation on https://pinkdev4.co.uk

Built using Underscores (_s theme) and Foundation.

I’ve been having trouble with the navigation – basically the theme had the foundation nav menu integrated, but it was massively overkill for what we needed, which at the time didn’t have any submenus. Everything was fine until the client now requires a subnav under one of the menu li’s.

I have managed to get the subnav on it’s own line underneath, however cannot get it to align with the parent li.

Header code:

<div class="row">
			<nav id="site-navigation-new" class="main-navigation-new" role="navigation">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #site-navigation -->
		</div><!-- row -->

CSS

/* Nav */

.menu-mainmenu-container ul {
  list-style-type: none;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 40px;
}

.menu-mainmenu-container ul li {
  display: inline;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 2px solid #fff;
}

.menu-mainmenu-container ul li a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 10px;
}

.menu-mainmenu-container ul li:first-child {
  border-left: 0px solid #fff;
}

.menu-mainmenu-container ul li a:hover, .menu-mainmenu-container .current_page_item a {
  color: #fff;
  border-bottom: 2px solid #fff;
}

/* children fix */

nav ul {
  position: relative;
  float: right;
}

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul {
  position: absolute;
}

nav ul ul li {
  float: none;
  position: relative;
}

There’s some other issues too, but one thing at a time!

Many many thanks in advance