Решение, которое я нашел, состоит в том, чтобы избавиться от всех пробелов в HTML, так что:
<li class="dir nav-item"><a href="./">ABOUT US</a>
<div class="subnav-con">
<div class="nav-top">
</div>
<ul class="nav">
<li class="nav-item"><a href="./">HISTORY</a></li>
<li class="nav-item"><a href="./">VISION</a></li>
<li class="dir nav-item"><a href="./">TEAM</a>
</li>
<li class="nav-item"><a href="./">CLIENTS</a></li>
<li class="nav-item"><a href="./">TESTIMONIALS</a></li>
<li class="nav-item"><a href="./">PRESS</a></li>
<li class="nav-item"><a href="./">FAQ</a></li>
</ul>
<div class="nav-bottom"></div>
</div>
</li>
становится таким:
<li class="dir nav-item"><a href="./">ABOUT US</a><div class="subnav-con"><div class="nav-top"></div><ul class="nav"><li class="nav-item"><a href="./">HISTORY</a></li><li class="nav-item"><a href="./">VISION</a></li><li class="dir nav-item"><a href="./">TEAM</a></li><li class="nav-item"><a href="./">CLIENTS</a></li><li class="nav-item"><a href="./">TESTIMONIALS</a></li><li class="nav-item"><a href="./">PRESS</a></li><li class="nav-item"><a href="./">FAQ</a></li></ul><div class="nav-bottom"></div></div></li>
Возможно, есть более удобный способ с использованием CSS,но я не собираюсь искать это, если вы действительно не хотите, чтобы я.