lمشکل با منو عمودی

[capitan_nemesis]

با سلام
من یک منو عمودی درست کردم
که
وقتی روی منو hover شد یک بکگراند دور نوشته کامل عرض قالب منو و نوشته قرمز بشه
ولی
این نمیشه بکگراند دور نوشته نمیگیره
css:
#vertical_menu
{
background-color: #000000;
width: 250px;
height: 400px;
float: right;
list-style-type: none;
margin: 10px 10px 0 0;
padding: 0 0 0 0;
}

#vertical_menu font
{
text-align: center;
padding: 3px 88px 10px 0;
}

#vertical_menu hr
{
width: 240px;
text-align: center;
}

#vertical_menu p
{
color: #ADD8E6;
margin: 0 30px 0 0;
padding: 0 30px 0 0;
}


#vertical_menu a
{
color: #ffffff;
margin: 0 40px 0 0;
padding: 0 40px 0 0;
text-decoration: none;
font-size: 15px;
}

#vertical_menu div
{
margin: auto auto;
padding: auto auto;
}

#vertical_menu div:hover
{
background-color: #ffffff;
color: #FF0000;
width: auto;
margin: auto 40px;
padding: auto 40px;
}


html:
<!-- vertical menu -->
<div id="vertical_menu">
<font face="tahoma" size="4" color="#ffffff">موضوعات</font>

<hr>

<p>اخبار ها:</p>

<div><a href="computer_news.php">بازی های کامپیوتری</a></div>
<div><a href="information_news.php">دنیای فناوری</a></div>

<br>

<p>نقد و بررسی:</p>

<div><a href="survey_computer.php">بازی های کامپیوتری</a></div>
<div><a href="survay_information.php">دنیای فناوری</a></div>

<br>

<p>گالری:</p>

<div><a href="gallery_picture.php">عکس</a></div>
<div><a href="gallery_music.php">موسیقی</a></div>
<div><a href="gallery_video.php">ویدئو</a></div>

<br>

<p>دانلود بازی:</p>

<div><a href="dl_computer.php">کامپیوتر</a></div>
<div><a href="dl_psp.php">سونی دستی</a></div>
<div><a href="dl_xbox.php">ایکس باکس</a></div>
<div><a href="dl_flash.php">فلش</a></div>

</div>

[SA_Developer]

سوالتون واضح نیست
منظورتون اینه؟ http://jsbin.com/kesucoxaca/1/

[capitan_nemesis]

دقیقا
وقتی hover شد اون بکگراند چطوری فیکس شد ؟؟؟