Nach oben Richten ULs aus, wenn übergeordneter Text umhüllt

Question

Ich habe ein Nav, dass, wenn ein Elterntext umbrochen wird, die UL nach unten fällt, damit sie nicht mit angrenzenden ULs ausgerichtet wird.

In der Geige unten, möchte ich Find a Park zu den angrenzenden Golf Preserve und Recreation Center LIs top ausrichten, wo es derzeit nicht oben mit den angrenzenden LIs ausgerichtet ist.

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 &amp; 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 &amp; 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 &amp; 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; 
} 

Vielen Dank für jede Hilfe.

Answer 1

Sie müssen sich auf

.TopNavMain ul.nav li .sub-menu a { 

    .... 
    height:20px; 
} 

eine feste Höhe setzen