a:hoverでbackground-colorを指定すると、空白が縮む

質問

趣味のホームページを作っているのですが、a:hoverで、カーソルがリンクに乗ったときに背景色が変わるようにしています。

トップページのメニューをリストで作成しているのですが、リストの下から2番目くらいのリンクをカーソルで上下になぞると、リストの下の空白が縮むようになってしまいました。

言葉だけではわかりにくいと思うので、下に図を書きます。

------------------------------------------------
リストメニュー
------------------------------------------------
空白
------------------------------------------------
リストメニュー
------------------------------------------------

こんなふうに、いくつかのメニューを積み重ねている感じのデザインです。
それで、問題の現象は、

------------------------------------------------
・カテゴリ１
・カテゴリ２　←下から2番目くらいのリンクをカーソルでなぞる
・カテゴリ３
------------------------------------------------
空白の部分が縮む。
------------------------------------------------
・カテゴリ４
・カテゴリ５　←どの段のリストメニューも、同じ現象
・カテゴリ６
------------------------------------------------

こんな感じです。
a:hoverで背景色を指定しなければ、この現象は起きません。
でも、どうしてもCSSでリンクの背景色を変えたいんです。

ちなみに、IEではこの現象は起きますが、Firefoxでは起きませんでした。
IE特有のバグか何かですか？

どなたか解決法がわかる方、教えてください。
よろしくお願いします。

回答No.2

simeondun

No.1です。
補足で記入いただいた通りで書いてみましたが
言われている問題が発生しませんでした。
なので他の部分に問題があるのかもしれません。

尚、正確なa要素の書く順番は下記の通りです。
a{
text-decoration:underline;
}
a:link{
color:#330000;
}
a:visited{
color:#330000;
}
a:hover{
color:#ffffff;
background-color:#993300;
}
a:active{
color:#330000;
}
※hoverとactiveの順序が逆になります。

お礼

返信ありがとうございます。
問題部分が解決いたしましたので、お知らせします。

CSSのulの部分に、margin-bottom:0;か、
border:1px solid #ffffff;のいずれかを加えることで、
空白が動くことはなくなりました。

ご指摘のa要素の件、早速直させていただきます。
ありがとうございました。

回答No.1

simeondun

トラブルが起こっている部分とその前後のCSSとhtmlタグを記入いただければ
どこに問題が起きているのかわかるかもしれません。

また、a要素は順番通りに書かないとブラウザによっては反映されないことがあります。
正しい順番
a:link{　　}　
a:visited{　　}
a:hover{　　}
a:active{　　}

参考ページ［実は重要！スタイルシートの記述順！］
http://allabout.co.jp/internet/hpcreate/closeup/CU20050621A/index3.htm
［疑似クラスの指定］
http://www.tagindex.com/stylesheet/basic/format4.html

補足

返信が遅くなってすみません。
不具合が起きる部分のソースを、再現（一部コピー）して記載します。
ソース内のコメントは無視してください。

a{
text-decoration:underline;
}
a:link{
color:#330000;
}
a:visited{
color:#330000;
}
a:active{
color:#330000;
}
a:hover{
color:#ffffff;
background-color:#993300;
}

ul{
margin-top:5px;
}

li{
background-image:url('li.gif');
background-repeat:no-repeat;
background-position:0 6px;
list-style:none;
padding-left:20px;
}

.con_left{
float:left;
width:600px;
margin-top:9px;
line-height:200%;
}

.aisatu{
width:590px;
margin:5px 5px 10px 5px;
border:1px solid #ff8c00; /* darkorange */
}

.aisatu_in{
margin:3px;
padding:6px;
line-height:170%;
border:1px dotted #ff8c00;
}

.midashi{
clear:left;
width:600px;
font-weight:bold;
color:#ffffff;
background-image:url('midashi_1.gif');
background-repeat:no-repeat;
height:30px;
font-size:16px;
padding-top:2px;
}

.m_in{
padding-left:30px;
}

.komidashi{
float:left;
width:287px;
margin-right:3px;
}

.komi_in{
width:290px;
}

.komidashi2{
float:left;
width:287px;
margin-left:3px;
}

-----ここまでがCSSのソースです-----
-----ここからはHTMLのソースです-----

<div class="con_left"><!-- コンテンツ左ここから -->

<div class="aisatu"><!-- 外枠ここから -->
<div class="aisatu_in">

<div class="kaku_mi">
見出し２
</div>

<div class="message"><!-- 本文ここから -->
ここに本文

</div><!-- 本文ここまで -->

</div>
</div><!-- 外枠ここまで -->

<div class="midashi">
<div class="m_in">
見出し３
</div>
</div>
<div class="komidashi">
<div class="komi_in">
<ul>
<li>&nbsp;<a href="index.html">１</a></li>
<li>&nbsp;<a href="index.html">２</a></li>
<li>&nbsp;<a href="index.html">３</a></li>
<li>&nbsp;<a href="index.html">４</a></li>
<li>&nbsp;<a href="index.html">５</a></li>
<li>&nbsp;<a href="index.html">６</a></li>
</ul>
</div>
</div>
<div class="komidashi2">
<div class="komi_in">
<ul>
<li>&nbsp;<a href="index.html">７</a></li>
<li>&nbsp;<a href="index.html">８</a></li>
<li>&nbsp;<a href="index.html">９</a></li>
<li>&nbsp;<a href="index.html">１０</a></li>
<li>&nbsp;<a href="index.html">１１</a></li>
<li>&nbsp;<a href="index.html">１２</a></li>
</ul>
</div>
</div>

</div><!-- コンテンツ左ここまで -->

こんな感じです。
これだけで、何かわかりますでしょうか。