Webmaster World Forum http://www.webmasterworld.com

Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Trying to figure out why second drop down menu doesnot work.

stevenb_1959 - 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>

</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>

Thread source:: http://www.webmasterworld.com/css/8613.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com