css - 父文本换行时顶部对齐 UL

Question

我有一个导航，当父文本换行时，它会降低 UL，因此它不会与相邻的 UL 顶部对齐。

在下面的 fiddle 中，我希望 Find a Park 与相邻的 Golf Preserve and Recreation Center LI 顶部对齐，而目前它并未与相邻的 LI 顶部对齐。

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