父文本换行时 UL 上对齐

Question

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

在下面的小提琴中，我希望找到一个公园与相邻的高尔夫保护区和娱乐中心 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;
}