css menu help URGENT!!!

[artosousa]

I am working on a small website change, they wanted a dropdown menu on one of their items in their navigation, i have got it but when you roll over the link and the dropdown appear all the content on the page will move to the right...

i didn't code the page, it was used with tables which i don't like using...

just wondering if there is a quick way to fix this....

http://canvasskateboards.ca/SKIN/about.html

 

body { color: #421808;
font-size: 10pt; 
font-family: Arial, Helvetica, SunSans-Regular, sans-serif, "Trebuchet MS", Geneva; }
.aaquatext { 
color: #6fcee4; 
font-size: 13pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}
#wrapper{
width:800px;
position:relative;
margin:0px auto;
}
#outside{
background:#523019;
}
#myname{
background-color:#6fcee4;
color:#523019;
border:none;
}
#myemail{
background-color:#6fcee4;
color:#523019;
border:none;
}
#mymessage{
background-color:#6fcee4;
color:#523019;
border:none;
}

#apDiv2 {
position:absolute;
left:466px;
top:42px;
width:150px;
height:134px;
z-index:1;
background-color:#523019;
visibility: visible;
}
#apDiv1 {
position:absolute;
left:480px;
top:210px;
width:312px;
height:184px;
z-index:1;
}
p { }
td { }
a:link { 
color: #6fcee4; 
font-size: 10pt; 
font-family: Arial, Helvetica, SunSans-Regular, sans-serif, "Trebuchet MS", Geneva; 
font-weight: normal; 
font-style: normal; 
text-decoration: underline; 
}

.maintext { 
color: #421808; 
font-size: 10pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}
.footertext { 
color: #421808; 
font-size: 9pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}
.callustext { 
color: #421808; 
font-size: 10pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}
.footergreytext { 
color: #999; 
font-size: 9pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
line-height: 8pt; 
}
.browntext { 
color: #421808; 
font-size: 13pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}
.aquatext { 
color: #6fcee4; 
font-size: 15pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}

.pricetext {
color: #6fcee4; 
font-size: 11pt; 
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
/* Menu position that can be changed at will */
top: 42px;
left: 187px;
z-index:100;
width: 801px; /* precision for Opera */
height: 19px;
}
#menu dl {
float: left;
width: 7.5em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
margin: 1px;
background-color:#523019
}
#menu dd {
display: none;
}
#menu li {
text-align: center;
background: #6DCDE3;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #6DCDE3;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #6DCDE3;
background-color: #6DCDE3;
padding: 5px;
}
a:link {
font-size: 8pt;
}
a:hover {
font-size: 8pt;
color:#6FCEE9;
}
a:visited {
font-size: 8pt;
}
a:active {
font-size: 8pt;
}

 

[jcombs_31]

You'll typically need to use some absolute positioning and layering for the drop down menu.

[haku]

Urgent! Let me get working on that for you ASAP. Gotta make the wages you pay me...

[noober]

Nothings moving for me...

[shadiadiph]

looks fine to me although in I.E 7 the drop down looks wrong you need to set a background color on your display block it is set at the moment to transparent somewhere??

[andrewsCWD]

I'm not sure exactly how to fix it but I thought I could test the site in a few browsers for you to let you know of other errors, it might help you trouble shoot:

 

Windows browsers.

 

firefox: drop down displays fine

IE 6: the stores and contact links appear on a new line

Opera: drop down appears almost fine, just the bg doesn't extend all the way to the right

Safari windows: drop down works fine except you lose the blue background that was behind it.