CSSテクニックコミュの[ 質問 ] リンクの枠線を左に伸びないようにする方法について

初めて､投稿させていただきます。
何卒､よろしくお願いいたします。

私の個人的なWEBサイト
http://h-rs.net
におきましてリンクをクリックすると枠線が
左に大きく伸びております。
これをボタンだけに枠線がかかる方法を
お教え頂きたく書込みいたしました。

ページのHTMLソースは
-----------------------
<div id="menudesign">
<ul>
<li id="m_top"><a href="index.html">トップページ</a></li>
<li id="m_name"><a href="name01.html">みんなの名前を覚えよう</a></li>
<li id="m_schedule"><a href="schedule.html">練習スケジュール</a></li>
<li id="m_blog"><a href="blog/index.html">BLOG写真館</a></li>
</ul>
</div>
-----------------------
です。

CSSには
-----------------------
/*-menu-*/

#menu div#menudesign {
margin:0px;
padding:59px 0px 0px 0px;
width:230px;
height:101px;
background-image:url(../images/base/bk_menu.gif);
}

#menu ul {
margin:0px;
padding:0px;
list-style:none;
}

#menu li {
display:block;
margin:0px;
padding:0px 0px 0px 0px;
width:230px;
height:25px;
text-indent:-9999px;
}

#menu li a {
text-decoration:none;
display:block;
width:230px;
height:25px;
}

#menu li#m_top {
background:url(../images/base/menu_01.gif) no-repeat;
}

#menu li#m_top a:hover {
background:url(../images/base/menu_01_f2.gif) no-repeat;
}

#menu li#m_name {
background:url(../images/base/menu_02.gif) no-repeat;
}

#menu li#m_name a:hover {
background:url(../images/base/menu_02_f2.gif) no-repeat;
}

#menu li#m_schedule {
background:url(../images/base/menu_03.gif) no-repeat;
}

#menu li#m_schedule a:hover {
background:url(../images/base/menu_03_f2.gif) no-repeat;
}

#menu li#m_blog {
background:url(../images/base/menu_04.gif) no-repeat;
}

#menu li#m_blog a:hover {
background:url(../images/base/menu_04_f2.gif) no-repeat;
}
-----------------------
と記述しております。

ご存知の方､いらっしゃれば
何卒､よろしくお願いいたします。