メニューを作成してスタイルを設定しようとしています。ホバーしたときに説明 (スパン) を表示するために、いくつかの css アニメーションも使用しました。このメニューは Firefox で正しく動作します。しかし Chrome では、メニューの上に空白があります。Firebug で li タグを確認すると、li 要素が適切に配置されていないことがわかります。上に移動しました。firefoxでは発生しません。（以下のスクリーンショットを確認してください）。どうすればこれを修正できますか?
更新: サイトを Heroku にアップロードしました: http://aqueous-wildwood-4051.herokuapp.com/。このライブ サイトで問題が表示されます。
クロムで：
Firefox の場合:
これが私のサイドバーのコードです:
<aside id="sidebar" role="complementary">
<nav id="side-nav" role="navigation">
<ul>
<li ><a href="/"><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></a></li>
<li ><a href="/about"><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></a></li>
<li ><a href="#"><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></a></li>
<li ><a href="#"><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></a></li>
</ul>
</nav>
</aside>
CSS は次のとおりです。
#sidebar {
border-left: 1px solid #EDEDED;
box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
float: right;
min-height: 365px;
width: 24%;
#side-nav{
ul {
margin-top: 0px !important;
height: 187px;
list-style: none outside none;
margin-left: 0;
padding-left: 0;
width: 100%;
li{
height: 46px;
a{
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.listitem {
list-style: none outside none;
height: 32px;
text-align: center;
padding-top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.description {
visibility: hidden;
position: absolute;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
position: absolute;
margin-left: 8px;
margin-top: 4px;
opacity: 0;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
&:hover {
text-align: left;
.description {
visibility: visible;
opacity: 1;
}
.listtitle{
margin-left: 7px;
border-right: 1px solid #FFFFFF;
padding-right: 7px;
}
}
}
}
}
#side-nav-home{
background-color: #ED0042;
border: 2px solid #E87998;
}
#side-nav-about{
background-color: #e1cf3b;
border: 2px solid #C4BD80;
}
#side-nav-handbook{
background-color: #009dda;
border: 2px solid #5EADCC;
}
#side-nav-join{
background-color: #6ba01e;
border: 2px solid #98AB7D;
}
}
}
}