Total frustration, Spry Sub Menu jumps to top of page in IE 7.

Question

I am a newbie to Divs and spry menus, tring to put together a site for the local sports club. Have created a spry menu and have problems in IE browsers. In IE 7 the sub menu jumps to the top of the page. In IE 8 the submenu covers the main button/menu when you hover over it, instead of dropping down, also side image next to spry menu jumps out of Div. Works fine in Firefox. Have upgraded Spry to 1.61. Here is address of site    http://www.pascoevalesc.org.au/.
Help a very Frustrated person.
CSS:
@charset "utf-8";
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #161616;
    height: auto;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #container {
    width: 900px; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #000000;
    float: left;
    height: auto;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
.twoColFixRtHdr #header {
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    margin: 0px;
    padding: 0;
.twoColFixRtHdr #header h1 {
    margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    background-color: #000000;
    float: left;
    height: auto;
    width: 900px;
    padding: 0px;
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 150px;
    background-color: #000000;
    padding: 0px;
    height: auto;
.twoColFixRtHdr #mainContent {
    background-color: #000000;
    float: left;
    height: auto;
    width: 740px;
    margin: 0;
    padding: 0;
#maincontentbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 33px;
    width: 647px;
    margin-left: 50px;
#panthernewstop {
    float: left;
    height: 31px;
    width: 647px;
    background-image: url(../images/top-maincontent.gif);
    background-repeat: no-repeat;
    margin-left: 50px;
    margin-top: 120px;
#panthernewsmid {
    background-color: #000000;
    float: left;
    height: auto;
    width: 623px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #c6c4c4;
    border-right-color: #c6c4c4;
    border-bottom-color: #c6c4c4;
    border-left-color: #c6c4c4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 51px;
    padding-top: 0px;
    padding-right: 11px;
    padding-bottom: 0px;
    padding-left: 10px;
#panthernewsbottom {
    background-image: url(../images/bottom-maincontent.gif);
    background-repeat: no-repeat;
    float: left;
    height: 37px;
    width: 647px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 50px;
#sponsormaincontent {
    background-color: #000000;
    padding: 0px;
    height: 74px;
    width: 549px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-right-width: 0px;
    border-left-width: 0px;
    border-right-style: 0;
    border-left-style: 0;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-top-style: 0;
    border-bottom-style: 0;
.twoColFixRtHdr #footer {
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    height: 129px;
    width: 850px;
    padding: 0;
    float: left;
    margin-left: 20px;
.twoColFixRtHdr #container #footernav {
    float: left;
    height: 50px;
    width: 850px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #999999;
    margin-top: 40px;
    margin-right: 20px;
.twoColFixRtHdr #footer p {
    height: 129px;
    width: 850px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
#3tabdiv {
    background-color: #151515;
    float: left;
    height: auto;
    width: 740px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 90px;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.Title { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#panthernewsrow1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: left;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-left: 10px;
#panthernewsrow2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    float: right;
    height: auto;
    width: 280px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
.twoColFixRtHdr #container #mainContent #panthernewsbottom {
    background-color: #000000;
    margin: 20px;
    float: left;
    height: auto;
    width: 700px;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow1 .headtitles.style4 .style4 {
    font-size: 16px;
    font-weight: bold;
.twoColFixRtHdr #container #mainContent #panthernewsmid #panthernewsrow2 h2 .body-white {
    font-weight: normal;

Answer 1

G'day Mate,
You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Carn the Pies
Gramps