Log in

View Full Version : Help, my third tier drop down disappears when scroll



tartman
12-06-2011, 07:26 PM
Hi,
I can't fix this problem please help.
I have a drop down menu N Jeweler Info/NJ Session1/180 Tracking form, when I scroll down the 180 Tracking Form the drops disappear.
Can you help me, I've tried to figure this out for a month?
Thanks for any advise...I'm new to all of this.
T,

Problem page:
http://www.jewelerjoni.com/new_jeweler.htm [CODE]

Below is the problem drop #nav_1349473 at the end of the css code snippet.

[CODE]

/*******start new jeweler list**************/


.right_list { float:left;
width: 180px;
overflow: hidden;
padding-left: 10px;
margin-left: 10px;
overflow:hidden;
}

#cat_1347111_divs, #cat_1348105_divs, #cat_1349473_divs { padding:0;
margin: 0;
list-style: none;
float: left;

}

#nav_1347111 ul, #nav_1348105 ul, #nav_1349473 ul { padding:0;
margin: 0;
list-style: none;
float: left;

}


#nav_1349473 a { display: block;
width: 400px;
padding:10px;
color:white;
height: 25px;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #000;
border-top: 1px solid #fff;
background: #7681c0;
}

#nav_1348105 a { display: block;
width: 400px;
padding:10px;
color:white;
height: 25px;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #000;
border-top: 1px solid #fff;
background: #7681c0;
}

#nav_1347111 a { display: block;
width: 400px;
padding:10px;
color:white;
height: 25px;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #000;
border-top: 1px solid #fff;
background: #7681c0;
}


/*******1 level control************/

#nav_1347111 li a:hover { text-decoration: none;
background: #626b9f;
}

#nav_1348105 li a:hover { text-decoration: none;
background: #626b9f;
}

#nav_1349473 li a:hover { text-decoration: none;
background: #626b9f;
}

#nav_1347111 li { float: left;
margin-left: -10px;
}

#nav_1348105 li { float: left;
margin-left: -10px;
}

#nav_1349473 li { float: left;
margin-left: -10px;
}

/********2 level control*********/

#nav_1349473 li ul { position: absolute;
width: 150px;
left: -999em;
z-index: 500;
margin-left: 200px;
top: 294px;
font-size: 0.9em;
}

#nav_1347111 li ul { position: absolute;
width: 150px;
left: -999em;
z-index: 500;
margin-left: 200px;
margin-top: -47px;
font-size: 0.9em;
}

#nav_1348105 li ul { position: absolute;
width: 150px;
left: -999em;
z-index: 500;
margin-left: 200px;
margin-top: -47px;
font-size: 0.9em;

}

#nav_1348105, #nav_1348105 ul { padding:0;
margin: 0;
list-style: none; float: left;
}


#nav_1347111 li:hover ul { left: auto;
}

#nav_1348105 li:hover ul { left: auto;
}

#nav_1347111 li ul a { display:block;
color: white;
line-height: normal;
font-size: 1em;
text-transform: none;
font-family: Helvetica, Arial, sans-serif;
}

#nav_1349473 li ul a { display: block;
color: white;
line-height: normal;
font-size: 1em;
text-transform: none;
font-family: Helvetica, Arial, sans-serif;
}

#nav_1348105 li ul a { display: block;
color: white;
line-height: normal;
font-size: 1em;
text-transform: none;
font-family: Helvetica, Arial, sans-serif;
}

/***gray below****/


#nav_1349473 li ul li a { width: 150px;
height: 12px;
background: #363636;
}


#nav_1347111 li ul li a { width: 200px;
height: 12px;
background: #363636;
}

#nav_1348105 li ul li a { width: 200px;
height: 12px;
background: #363636;

}

/****purple below****/

#nav_1349473 li ul li a:hover { color: #fff;
background: #955e96;
}

#nav_1348105 li ul li a:hover { color: #fff;
background: #955e96;
}

#nav_1347111 li ul li a:hover { color: #fff;
background: #955e96;
}


/*********third level control*********/


/***** start below line controls the third tier children ********/

/*********nav 1349473 is the problem the third tier links disappear when hovered over**********/


#nav_1349473 li:hover>ul { left: auto;
}

#nav_1349473 li ul li ul a { position: relative;
width: 170px;
height: 12px;
display:block;
float: left;
font-size: 1em;
padding-bottom: 1.2em;
background: #b1629f;
left: -20px;
top: -294px;


/*******end new jeweler list**************/