No replies
pattyn
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2006-05-31
Posts: 2
Points: 0

Hello,
I have my dropdown working pretty well. two problems though....

In IE the background image on the dropdown won't be removed unless I apply more specific css targeting.

However when I do that, the styling is correct, but I can't mouseover anything but the first dropdown menu item --the second menu item disappears before I can get to it.

hee is css (situation 1) situation 2 (cant reach menu item is just below. Many thanks if someone has time to help me!

#top_menu {
	float: left;
	height: 25px; /* setting line-height of the first #nav ul to same as this ensures it fills the height without guessing at padding */
	width: 950px;
 
	margin: 0px 0 0 0;
	background: #D6CED6;
	 /* grey */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #1f2c8a;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
 
 
 
.ie6 #top_menu {
 
float: left;
	height: 25px; /* setting line-height of the first #nav ul to same as this ensures it fills the height without guessing at padding */
	width: 950px;
	padding-top: 0px;
	margin: -4px 0 0 0;
	background: #D6CED6;
	 /* grey */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #1f2c8a;
	font-weight: 600;
 
	text-transform: uppercase;
}
 
/* use line-height instead of top/bottom padding, avoided parts of the IE positioning problem */
/* however using the positioning co-ordinates as now shown below now negates this, and padding could optionally be used */
#top_menu ul {list-style: none; margin: 0; padding: 0 10px 0 10px; line-height: 25px; }
 
#top_menu ul ul {
padding: 0;
 line-height:  1.8em; 
 background-image: none;	!important
background: #fff none; /* white */
 }
#top_menu ul li {
background: transparent url(../images/vertical.gif) center right no-repeat;
float: left;
padding: 0 25px; /* pad left/right the list item for spacing between links */
font-size: 12px;
white-space: nowrap;
}
 
 
.ie #top_menu ul li {
background: transparent url(../images/vertical.gif) center right no-repeat;
float: left;
padding: 0 20px; /* pad left/right the list item for spacing between links */
font-size: 12px;
white-space: nowrap;
}
 
#top_menu  ul li li {
background-image: none;	!important
background: #fff none; /* white */
	padding: 0 15px; /* pad left/right the list item for spacing at sides of links */
	white-space: nowrap; /* forces link text not to wrap for IE6's width problem */
	font-size: 11px;
	background-image: none;
}
 
 
#top_menu ul li a {
	color: #1f2c8a;
	white-space: nowrap;
	padding-bottom: 4px; /* make this = to the padding+border value of the hover state below to avoid jumpy links */
	text-decoration: none;
 
}
 
#top_menu ul li li a:hover {
border-bottom: 1px solid #1f2c8a;
padding-bottom: 2px;
}
 
#top_menu ul li a:hover {
 
padding-bottom: 2px;
}
 
#top_menu ul ul {
background-image: none;
	font-size: 11px;
background: #fff none; /* white */
width: 1%;
	display: none;
	white-space: nowrap;
	padding: 0;
	text-transform: none;
	font-weight: 500;
	letter-spacing: 0.10em;
	/* if IE 7 has auto values it displays inline! */
/* using the percent method takes care of both line-height and padding used for height */
top: 100%; /* using this value means IE doesn't need separate values */
	left: 0; /* using this value means IE doesn't need separate values */
	margin-top: 0px; /* optional - adjust this to create any overlap required */
	margin-left: 3px; /* optional - adjust this to create any left offset, can be negative too */
background-image: none;
 
}
 
.ie6 #top_menu ul ul {
background: #fff none; /* white */
width: 1%;
display: none;
white-space: nowrap;
padding: 0;
border-right: 0px;
/* if IE 7 has auto values it displays inline! */
/* using the percent method takes care of both line-height and padding used for height */
top: 100%; /* using this value means IE doesn't need separate values */
left: 0; /* using this value means IE doesn't need separate values */
margin-top: 0px; /* optional - adjust this to create any overlap required */
margin-left: 5px; /* optional - adjust this to create any left offset, can be negative too */
background-image: none;
}
 
 
/*
IE prefers an :hover rule before extending that rule to a child of a hover
and because we only need the hovered list positioned I put the relative position rule in here
to satisfy that quirk, although putting the position in here with a z-index value also helps
bring drops atop other drops - (again IE) but should do no harm
*/
#top_menu ul li:hover,
#top_menu ul li.over {
position: relative;
z-index: 1;
}
 
#top_menu ul li:hover ul,
#top_menu ul li.over ul {
display: block;
position: absolute;
/* IE has problems with hasLayout if a trigger (which AP is) is on the main rule I think that's why I was seeing disappearing menu items but anyway it causes "ghosts" so it's best here */
/* if you had a width on the ul it would also need to go in here, because it too is a hasLayout trigger */
}
 
#top_menu ul li:hover ul li:hover ul,
#top_menu ul li.over ul li.over ul {display: block; }
 
 
/* quick IE hover code or put script in below */
#top_menu li {
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("this.className = this.className.replace(' over','')"),
this.style.behavior = null
);
}
 

--in situation2 (cant reach second menu) I added this
.ie #top_menu ul li.parent ul li {
background-image: none; !important
background: #fff none; /* white */
padding: 0 15px; /* pad left/right the list item for spacing at sides of links */
white-space: nowrap; /* forces link text not to wrap for IE6's width problem */
font-size: 11px;
background-image: none;
}