You seem to be missing the bit that makes the dropped menu appear on hover. You can see the missing bits highlighted in red below.
I changed a few things in your code, both the CSS and the markup. You should just copy/paste this entire thing into a new html document and compare it with your original version.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
height: 600px; /*demo only*/
width: 1210px;
margin: 30px auto;
background: #ccc;
}
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal {
list-style-type: none;
font-size: 140%;
cursor: default;
width: auto;
padding: 0;
margin: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive { z-index: 1000; }
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li {
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: auto;
float: left;
margin-top: 5 0 0 0;
position: relative;
}
ul.MenuBarHorizontal li:hover ul{left: 0;}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; }
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li { width: 8.2em; }
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
margin: 0px;
}
/* DESIGN INFORMATION: describes color scheme, borders, fonts */
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul {
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
display: block;
cursor: pointer;
color: #FFF;
text-decoration: none;
padding-top: 0.55em;
padding-right: 0.75em;
padding-bottom: 0.6em;
padding-left: 0.75em;
border-left-width: thin;
border-left-style: solid;
border-left-color: #604A7B;
border-right-width: thin;
border-right-style: solid;
border-right-color: #604A7B;
margin: 0px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #604A7B;
height: 18px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
color: #FFF57F;
background-image: url(../images/bg%20normal.gif);
background-repeat: repeat-x;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #FFFF00;
background-image: url(../images/bg%20hover.gif);
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-width: thin;
border-left-width: thin;
border-left-color: #FFF57F;
border-right-color: #FFF57F;
background-repeat: repeat-x;
}
/* SUBMENU INDICATION: styles if there is a submenu under a given menu item */
/* 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(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 99%;
}
/* 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/bg%20normal.gif);
background-repeat: repeat-x;
}
/* 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/bg%20hover.gif);
background-repeat: repeat-x;
}
/* 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 ul a.MenuBarItemSubmenuHover {
background-image: url(../images/backgroundb.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="container">
<!--Begin main navigation menu-->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html" id="home">HOME</a> </li>
<li><a href="../students.html" class="MenuBarItemSubmenu" id="students">PROOFREADING</a>
<ul>
<li><a href="../students.html">Students</a></li>
<li><a href="../corporate.html">Corporate</a></li>
</ul>
</li>
<li><a href="../editing.html" id="corporate">EDITING PLUS</a></li>
<li><a href="../translation.html" id="translation">TRANSLATION</a> </li>
<li><a href="../payment.html" id="payment">PAYMENT & SUBMISSION</a></li>
<li><a href="../faq.html" id="faq">FAQ</a></li>
<li><a href="../contact.html" id="contact">CONTACT</a></li>
</ul>
<!-- <div id="menu">
<ul>
<li><a id="first" title="Return to Home Page" href="/index.html">HOME</a></li>
<li><a title="Corporate Proofreading Services" href="../corporate.html"> CORPORATE <FONT COLOR="#FFFF00"><em>PLUS</em></FONT></a></li>
<li><a title="Translation - Malay to English" href="../translation.html">TRANSLATION</a></li>
<li><a title="Services only for Students" href="../students.html">STUDENTS</a></li>
<li><a title="Fees and Payment" href="/payment.html">PAYMENTS</a></li>
<li><a title="Submitting material for Editing" href="../submit.html">SUBMISSION</a></li>
<li><a title="Frequently asked Questions" href="/faq.html">FAQ</a></li>
<li><a title="Contact Us" href="/contact.html">CONTACT</a></li>
</ul>
</div>-->
<!--End main navigation menu-->
<!--end container--></div>
</body>
</html>