homepage Welcome to WebmasterWorld Guest from 54.198.42.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Trying to figure out why second drop down menu doesnot work.
2nd drop down menu isnot working, CSS code needs some advice!
stevenb 1959




msg:1186744
 10:17 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

 

stevenb 1959




msg:1186745
 1:38 pm on Mar 7, 2006 (gmt 0)

I figured out how to get my second popup menu to work

Code starts here:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Website Project Page Template</title>
<style type="text/css">
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
{
position:absolute;
top:0;
left:0;
float:left;
height: 200px;
width: 200px;
background: url(images/kitchenrefacerslogo.jpg) no repeat 0 0;
}

.img
{
display: block;
}

div#topright
{
position: absolute;
top:0;
left: 200px;
height: 200px;
width: 500px;
background: url(images/header.gif) blue no-repeat 0 0;
}

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

div#bottomright
{
position:absolute;
left: 200px;
top: 200px;
height: 400px;
width: 500px;
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: 18px
}

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

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

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

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

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.popupmenu
{
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;
}

/* 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#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.navigation:hover div.popupmenu
{
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" class="img" alt="Kitchen Refacers.ca">

</div>

<div id="topright">
<div id="navbar">
<div class="navigation" id="navhome"><a href="#" class="navigation"></a></div>
<div class="navigation" id="navservices">
<div id="menuservices" class="popupmenu">
<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="popupmenu">
<a href="#" class="menunavcontactus" id="mnucontactusnavemail"></a>
<a href="#" class="menunavcontactus" id="mnucontactusphonemail"></a>
</div>
</div>
</div>
</div>
</div>

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

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

</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved