Top Align ULs When Parent Text Wraps - css

Question

I have a nav that when a parent text wraps, it drops the UL down so it does not top align with adjacent ULs.
In the fiddle below, I would like Find a Park to be top aligned with the adjacent Golf Preserve and Recreation Center LIs , where currently it is not top aligned with the adjacent LIs.
https://jsfiddle.net/vge8vuxd/
<div class="row TopNavMain">
<ul class="nav mobile-nav">
<li class="active level0">
<a class="has-sub-menu active" href="http://www.someurl.com/PlayRecreation"><span>Play & Recreation</span><span class="border"></span></a><i class="fa fa-chevron-down"></i>
<ul class="sub-menu">
<li class="level1">
<a class="has-sub-menu " href="http://www.someurl.com/PlayRecreation/GolfHere"><span>Golf Here</span><span class="border"></span></a><i class="fa fa-chevron-down"></i>
<ul class="sub-menu">
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/GolfHere/GolfPreserve"><span> Golf Preserve</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/GolfHere/GolfCourse"><span> Golf Course</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/GolfHere/BookTeeTimes"><span>Book Tee Times</span><span class="border"></span></a></li>
</ul>
</li>
<li class="level1">
<a class="has-sub-menu " href="http://www.someurl.com/PlayRecreation/Popcorn,TrailsOpenSpace"><span>Popcorn, Trails & Open Space</span><span class="border"></span></a><i class="fa fa-chevron-down"></i>
<ul class="sub-menu">
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/Play,TrailsOpenSpace/FindaPark"><span>Find a Park</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/Play,TrailsOpenSpace/OpenSpaceTrails"><span>Open Space & Trails</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/Play,TrailsOpenSpace/Forestry"><span>Forestry</span><span class="border"></span></a></li>
</ul>
</li>
<li class="level1">
<a class="has-sub-menu " href="http://www.someurl.com/PlayRecreation/RecreationCenters"><span>Recreation Centers</span><span class="border"></span></a><i class="fa fa-chevron-down"></i>
<ul class="sub-menu">
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/RecreationCenters/RecreationCenter"><span> Recreation Center</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/RecreationCenters/FitnessCenter"><span> Fitness Center</span><span class="border"></span></a></li>
<li class="level2"><a class="" href="http://www.someurl.com/PlayRecreation/RecreationCenters/AnotherFitnessCenter"><span> Another Fitness Center</span><span class="border"></span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
.TopNavMain ul,
.TopNavMain ul li {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
position: unset;
}
.TopNavMain ul.nav li a {
display: block;
background: none;
}
.TopNavMain ul.nav li a span {
display: block;
}
.TopNavMain ul.nav > li > a {
position: static;
padding: 17px 20px;
color: #555759;
font-size: 16px;
line-height: 100%;
letter-spacing: 1px;
}
.TopNavMain ul.nav {
display: table;
width: 95%;
float: right;
}
.TopNavMain ul.nav > li {
display: table-cell;
}
.TopNavMain ul.nav > li > a {
text-align: center;
position: relative;
}
.TopNavMain ul.nav li .sub-menu {
display: table;
position: relative;
width: auto !important;
text-align: left;
}
.TopNavMain ul.nav li .sub-menu li {
display: table-cell;
padding: 20px 10px 35px;
vertical-align: top;
}
.TopNavMain ul.nav li .sub-menu a {
display: inline-block;
margin: 10px 0 20px;
padding: 5px 0px;
color: #555759;
font-size: 16px;
line-height: 100%;
font-weight: bold;
}
.TopNavMain ul.nav li .sub-menu ul li {
width: 100% !important;
display: block;
float: left;
text-align: left;
padding: 0;
margin: 10px 0 0;
}
.TopNavMain ul.nav li .sub-menu ul a {
padding: 5px 0;
font-size: 13px;
color: #797b7c;
font-weight: normal;
}
.TopNavMain ul.nav li .sub-menu li ul li a {
margin: 0;
}
.TopNavMain ul.nav li .sub-menu ul li ul {
display: none;
}
Thanks for any assistance.

Answer 1

You need to put a fixed height on
.TopNavMain ul.nav li .sub-menu a {
....
height:20px;
}