stevenb_1959 - 10:12 pm on Mar 6, 2006 (gmt 0)

Hello, I am fairly new to CSS and am trying to create a drop down menu, actually two of the nav buttons will have dropdown menus.
One for the SERVICES nav button and one for the CONTACT US nav button. I have the SERVICES drop down menu working but the CONTACT US dropdown menu doesnot seem to be working, I think I have the divisions closed incorrectly but I amnot sure.

the code is :
body
{
behavior: url(behaviors/csshover.htc);
background: white;
margin: 0;
padding: 0;
height: 100%;
font-family: helvetica, arial, verdana, sans-serif;
font-size: 12px;
font-weight: 600;
}

div.layout
{
width: 700px;
margin: 0 auto;
height: 100%;
}

div#topleft
{
float:left;
margin: 0;
height: 200px;
width: 200px;
}

#topleft img
{
display: block;
}

div#topright
{
height: 200px;
width: 500px;
margin: 0 0 0 200px;
background: blue;
}

div#bottomleft
{
position:absolute;
left:0;
top:200px;
float:left;
height: 400px;
width: 200px;
background: green;
}

div#bottomright
{
left: 200px;
top: 200px;
height: 400px;
width: 500px;
margin: 0 0 0 200px;
background: yellow;
}

div#navbar
{
position:relative;
top: 0px;
}

div.navigation
{
height: 24px;
width: 100px;
display: block;
position: absolute;
top: 0px;
}

a.navigation
{
height: 100%;
width: 100%;
display: block;
}

div#navhome
{
background: url(images/nav_home_on.jpg) no-repeat;
left: 25px
}

div#navservices
{
background: url(images/nav_services_on.jpg) no-repeat;
left: 91px
}

div#navpricing
{
background: url(images/nav_pricing_on.jpg) no-repeat;
left: 191px
}

div#navaboutus
{
background: url(images/nav_aboutus_on.jpg) no-repeat;
left: 291px
}

div#navcontactus
{
background: url(images/nav_contactus_on.jpg) no-repeat;
left: 391px
}

div#navhome:hover
{
background: url(images/nav_home_off.jpg) no-repeat;
}

div#navservices:hover
{
background: url(images/nav_services_off.jpg) no-repeat;
}

div#navpricing:hover
{
background: url(images/nav_pricing_off.jpg) no-repeat;
}

div#navaboutus:hover
{
background: url(images/nav_aboutus_off.jpg) no-repeat;
}

div#navcontactus:hover
{
background: url(images/nav_contactus_off.jpg) no-repeat;
}

div.popupmenuservices
{
display: none;
}

div#menuservices
{
position: absolute;
top: 24px;
width: 100px;
height: 72px;
background: url(images/menunavservices_dropdown_bg.gif) no-repeat;
}

/* Default properties for menu navigation buttons */
a.menunavservices
{
position: absolute;
display: block;
width: 100px;
height: 24px;
left: 0px;
}

/* Set menu to visible when container mouses over navfirst button */
div#navservices:hover div.popupmenuservices
{
display: block;
}

/* Properties for menu navigation buttons, set position and graphic */
a#mnuservicesnavcountertops
{
top: 0px;
background: url(images/nav_mnu_ser_countrtps_on.jpg) no-repeat;
}

a#mnuservicesnavdoors
{
top: 24px;
background: url(images/nav_mnu_ser_doors_on.jpg) no-repeat;
}

a#mnuservicesnavaccessories
{
top: 48px;
background: url(images/nav_mnu_ser_acces_on.jpg) no-repeat;
}

/* Mouseover states for menu navigation buttons */
a#mnuservicesnavcountertops:hover
{
background: url(images/nav_mnu_ser_countrtps_off.jpg) no-repeat;
}

a#mnuservicesnavdoors:hover
{
background: url(images/nav_mnu_ser_doors_off.jpg) no-repeat;
}

a#mnuservicesnavaccessories:hover
{
background: url(images/nav_mnu_ser_access_off.jpg) no-repeat;
}

div.popupmenucontactus
{
display: none;
}

div#menucontactus
{
position: absolute;
top: 24px;
width: 100px;
height: 48px;
background: url(images/menunavcontus_dropdown_bg.gif) no-repeat;
}

/* Default properties for menu navigation buttons */
a.menunavcontactus
{
position: absolute;
display: block;
width: 100px;
height: 24px;
left: 0px;
}

/* Set menu to visible when container mouses over navfirst button */
div#navcontactus:hover div.popupmenuscontactus
{
display: block;
}

/* Properties for menu navigation buttons, set position and graphic */
a#mnucontactusnavemail
{
top: 0px;
background: url(images/nav_mnu_cntus_email_on.jpg) no-repeat;
}

a#mnucontactusphonemail
{
top: 24px;
background: url(images/nav_mnu_cntus_phmal_on.jpg) no-repeat;
}

/* Mouseover states for menu navigation buttons */
a#mnucontactusnavemail:hover
{
background: url(images/nav_mnu_cntus_email_off.jpg) no-repeat;
}

a#mnucontactusphonemail:hover
{
background: url(images/nav_mnu_cntus_phmal_off.jpg) no-repeat;
}

</style>
</head>

<body>
<div id="topleft" class="layout">
<img src="images/logo.jpg" alt="Kitchen Refacers.ca">

</div>

<div id="topright" class="layout">
<div id="navbar" class="layout">
<div class="navigation" id="navhome"><a href="#" class="navigation"></a></div>
<div class="navigation" id="navservices">
<div id="menuservices" class="popupmenuservices">
<a href="#" class="menunavservices" id="mnuservicesnavcountertops"></a>
<a href="#" class="menunavservices" id="mnuservicesnavdoors"></a>
<a href="#" class="menunavservices" id="mnuservicesnavaccessories"></a>
</div>
</div>
<div class="navigation" id="navpricing"><a href="#" class="navigation"></a></div>
<div class="navigation" id="navaboutus"><a href="#" class="navigation"></a></div>
<div class="navigation" id="navcontactus">
<div id="menucontactus" class="popupmenucontactus">
<a href="#" class="menunavcontactus" id="mnucontactusnavemail"></a>
<a href="#" class="menunavcontactus" id="mnucontactusphonemail"></a>

</div>
</div>
</div>

<div id="bottomleft" class="layout">
stuff Bottom Left here
</div>

<div id="bottomright" class="layout">
stuff Bottom Right here
<div id="content">
#*$!x<br />
#*$!x<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
xxxx<br />
</div>
</div>

Any advice, critique and helpful information to enlighten me on CSS would be greatly appreciated.

If any of my code is incorrectly or not properly constructed even if it is unrelated to the drop down menus I would greatly appreciate it as I learn more from peoples ideas and how they see and interpret things.

PS: any suggestions on how to get my "topright" div up and to the right of my "top left" div.
Thank you in advance for your time and thoughts.
Steve