Navibar moving back up when mouse is in dropdown

Question

For a school project, I had to create a website by myself and I'm pretty much done except for my navibar. An example of how my navi looks like will be this - http://www.regent-college.edu/. When i hover over a link, it will move down and a dropdown will appear. However, when my mouse is in the dropdown, it will go back up, making my dropdown seem as if its floating in the air as compared to regent college's navi. Is there a way to solve this?

HTML

<div id="nav">
                <!-- start of navi bar -->
                <ul id="drops">
                    <li><a href="enrol.html" class="enrol">Enrol</a></li>
                  <li><a href="#" class="donate">Donate</a>
                    <ul class="drop1"> <ul class="drop1text">
                            <li><a href="individualdonation.html">Individual Donation</a></li>
                        <li><a href="construction.html">Corporate Donation</a></li>
                        </ul> </ul>
                        </li>
                  <li> <a href="volunteer.html" class="volunteer">Volunteer</a> </li>
                  <li><a href="construction.html" class="photo">Photo Gallery</a></li>
                  <li><a href="#" class="events">Events</a>
                    <ul class="drop2">  <ul class="drop1text">
                            <li><a href="construction.html">Workshops</a></li>
                         <li><a href="construction.html">Upcoming Events</a></li>
                            <li><a href="construction.html">Past Events</a></li>
                        </ul></ul>
                    </li>
                     <li><a href="contactus.html" class="contactus">Contact Us</a></li>
                </ul>
               </div>

CSS

#nav {
float:right;
width:596px;
height:207px;
}   

#drops, #drops ul {
padding:0;
margin:0;
clear:both;
float:left;
width:inherit;
}

#drops ul.drop1, #drops ul.drop2 {
float:left;
margin-top:178px;   
clear:both;
z-index:1;
}

#drops ul.drop1 {
background:url(../images/donatedrop.png) top left no-repeat;
width:198px;
height:180px;
}

#drops ul.drop2 {
background:url(../images/eventsdrop.png) top left no-repeat;
width:201px;
height:180px;
}

#drops ul.drop1text {
margin-top:43px;
padding-left: 25px;
line-height:33px;
color:#666;
font-size:19px;
text-decoration:none;
letter-spacing:1px;
-webkit-text-stroke: 2px;
}

#drops ul.drop1 a:hover, #drops ul.drop2 a:hover {
color:#000;
}

#drops a {
display: block;
float:left;
clear:both;
width:160px;
z-index:2;
}

#drops li {
float: left;
}

#drops li ul {
position: absolute;
width: 12em;
left: -999em;
}

#drops li:hover ul, #drops li.sfhover ul {
left: auto;
}

/*BACKGROUP POSITIONING*/

#nav a.enrol, #nav a.donate, #nav a.volunteer, #nav a.events, #nav a.photo, #nav a.contactus {
float:right;
background: url(../images/navibar.png) no-repeat;
height:207px;
text-indent:-999999px;
z-index:2;
}

#nav a.enrol {  
background-position:left top;
width:100px;
}

#nav a.donate { 
background-position:-100px 0;
width:98px;
}

#nav a.volunteer {  
background-position:-198px 0;
width:100px;
}

#nav a.photo {  
background-position:-298px 0;
width:99px;
}   

#nav a.events { 
background-position:-397px 0;
width:99px;
}

#nav a.contactus {
background-position:-496px 0;
width:100px;
}

#nav a.enrol:hover      { background-position:left -207px;}
#nav a.donate:hover     { background-position:-100px -207px;}
#nav a.volunteer:hover  { background-position:-198px -207px;}
#nav a.photo:hover      { background-position:-298px -207px;}
#nav a.events:hover     { background-position:-397px -207px;}
#nav a.contactus:hover  { background-position:-496px -207px;}   


#nav a#active1 {background-position:left -414px;}
#nav a#active2 {background-position:-100px -414px;}
#nav a#active3  {background-position:-198px -414px;}
#nav a#active4  {background-position:-298px -414px;}    
#nav a#active5   {background-position:-397px -414px;}   
#nav a#active6  {background-position:-496px -414px;}

Thank you for your time :)

Answer 1

Change

#nav a.enrol:hover      { background-position:left -207px;}
#nav a.donate:hover     { background-position:-100px -207px;}
#nav a.volunteer:hover  { background-position:-198px -207px;}
#nav a.photo:hover      { background-position:-298px -207px;}
#nav a.events:hover     { background-position:-397px -207px;}
#nav a.contactus:hover  { background-position:-496px -207px;}   

to:

#nav li:hover a.enrol      { background-position:left -207px;}
#nav li:hover a.donate     { background-position:-100px -207px;}
#nav li:hover a.volunteer  { background-position:-198px -207px;}
#nav li:hover a.photo      { background-position:-298px -207px;}
#nav li:hover a.events     { background-position:-397px -207px;}
#nav li:hover a.contactus  { background-position:-496px -207px;}