چگونگی طراحی این منو

[capitan_nemesis]

با سلام
۱-این سایت رو نگاه کنید : http://virtualpiano.net/
۲-منو بالا رو نگاه کنید
وقتی hover شد یک بکگراند نارنجی ظاهر میشه
اینو چشکلی میتونم طراحی کنم
اینم کدم
#box_horizontal_menu
{
background-color: #000000;
height: 30px;
margin: 0 0 0 0;
padding: 10px 0 0 0;
text-align: center;
}

#horizontal_menu
{
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#horizontal_menu li
{
float: right;
text-align: center;
margin: auto auto;
padding: 0 5px 10px 5px;
}

#horizontal_menu li a
{
text-decoration: none;
text-align: center;
color: #ffffff;
margin-right: 20px;
padding: 0 5px 0 5px;
}

#horizontal_menu li a:hover
{
background-color: #ffffff;
color: #ff0000;
height: 18px;
padding: 10px 5px;
-webkit-animation-name: anime;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 10s;
-webkit-animation-play-state: running;
}

@-webkit-keyframes anime
{
from
{
background-color: #000000;
opacity: 0;
}
to
{
background-color: #ffffff;
opacity: 1;
}
}

<!-- horizontal menu -->
<div id="box_horizontal_menu">
<ul id="horizontal_menu">
<li><a href="index.php">صفحه نخست</a></li>
<li><a href="search.php">جستجو در سایت</a></li>
<li><a href="loging.php">ورود به سایت</a></li>
<li><a href="register.php">ثبت نام در سایت</a></li>
<li><a href="about_us">درباره ما</a></li>
<li><a href="contact_us.php">تماس با ما</a></li>
</ul>
</div>

[phpdev]

خوب شما کد رنگ سفید رو گذاشتی توی :hover بعد میگی چرا نارنجی نمیشه:گریه:

البته خود سایت اصلیشم با کمی ترفند جی کوئری اینکار رو انجام داده که حالا شما میتونی اینکار رو نکنی

[capitan_nemesis]

مال سایت نارنجی هستش
من میخوام مثل تکنیک انیمیشن از غیب بشه سفید بکگراند هم سیاه هستش
jq هنوز شروع نشده با css نمیشه این کار رو انجام داد

[capitan_nemesis]

ایول با css درش اوردم
-webkit-transition: 0.6s;
-moz-transition: 0.6s;