ul要素のfloatで下に隙間ができる時の解決策！メニュー作成中にhoverしたら隙間が、、

<?php if ( has_nav_menu( 'topbar' )){
      $args = array(
        'theme_location' => 'topbar',
        // ul要素を囲むかどうか。使えるタグはdiv、nav。囲まない場合はfalseを指定。初期値はdiv
        'container'      => '',
        // メニューのリンク前に表示するテキスト。初期値はなし
        'link_before'    => '',
        // メニューのリンク後に表示するテキスト。初期値はなし
        'link_after'     => '',
        // メニュー項目を囲むタグ。囲むタグをなしにする場合でも、パラメータを指定し %3$s の記述が必須
        'items_wrap'     =>'<div id="top-menu"><ul class="menu" ontouchstart="">%3$s</ul></div>'
      );
      wp_nav_menu( $args );
    }; ?>

font-size:0px;

をつければ、修正されるのを思い出しました。

まさかと思いつつ、ulの親要素に当たるtop-menuに対して、font-size:0px;を指定すると無事、隙間が埋まりました。。

なんだったんだろうなぁ〜〜

.menu {
font-size: 12px;
display:inline-block;
list-style: none;
padding:0;
vertical-align:bottom;
}

というわけで、ul要素につけているクラスであるmenuにvertical-align:bottom;
をつけてみたら無事縦の隙間が解消されました！

気分的にはfont-size:0px;を使うよりもスマートな対応な気がします！