頂端對齊的UL當家長文字環繞

Question

我有一個導航，當家長文本換行，則丟棄該UL下來，它不頂與相鄰的上行線路一致。

在下面的小提琴，我想找到一個公園與相鄰的高爾夫球場保護區和娛樂中心LIS，在目前它沒有頂部相鄰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 &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; 
} 

感謝您的任何援助。

Answer 1

你需要把一個固定的高度上

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

    .... 
    height:20px; 
}