Kinda new to this.I want a drop down list to appear in my menu items. I tried with css too...bt not working.

Following is the code :
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="managed-dedicated-server.php">DEdicated Servers</a>
<ul>
<li><a href="managed-dedicated-server.php">Managed Hosting</a></li>
<li><a href="unmanaged-dedicated-server.php">Unmanaged Hosting</a></li>

</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="linux-vps.php">VPS Servers</a>
<ul>
<li><a href="linux-vps.php">Linux VPS</a></li>
<li><a href="windows-vps.php">Windows VPS</a></li>
<li><a href="managed-vps.php">Managed VPS</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="rack-space.php">Colocation Servers</a>
<ul>
<li><a href="rack-space.php">Rack Space</a></li>
<li><a href="server-colocation.php">Server Colocation</a></li>
</ul>
</li>
<li><a href="contacts.php">Contact Us</a>

</li>
<li><a href="supporttickets.php">Support</a>

</li>
<li><a href="offers.php">Offers</a>

</li>
</ul>
</div>

My css code is as follows:

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(../images/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 93% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(../images/SpryMenuBarRight.html);
background-repeat: no-repeat;
background-position: 93% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image:url(../images/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 93% 50%;
}

Can anybody help me out with this...
Any sort of help is appreciated.