• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 489
  • Last Modified:

z-index IE 7

Hi,

On my website I got a CSS drop down menu. in IE7 the dropdown from the menu is positioned behind the content of the website. Exactly like: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

How can I fix this, I tried the solution from the above URL, but I can't seem to fix it.

Thanks!

ul.nice-menu-down {
	margin-left: 9px;
  float: left;
  border: 0;
}

ul.nice-menu-down a{
	color: white;
	font-weight: bold;
}

ul.nice-menu-down a.active, ul.nice-menu-down a:active{
	color: white;
}

ul.nice-menu-down a:hover{
	text-decoration: none;
}

ul.nice-menu-down li {
	border-right: 1px solid #1b275e;
	width: 199px;
	height: 25px;
	padding: 6px 0px 6px 0px;
	text-align: center;
}

ul.nice-menu-down li.menu-path-contact {
	border: 0px;	
}

ul.nice-menu-down li li {
	border: 0px;
}

ul.nice-menu-down ul {
	background: #f4f4f4;
  font-weight: normal;
  top: 37px;
  left: 0px;
	right: 0px;
	width: 199px
}

ul.nice-menu-down ul li{

	text-align: left;	
	border-bottom: 1px;
	border-left: 1px;
	border-right: 1px; 
	border-style: solid;
	border-color: #CFCFCF; 	
	padding: 0;
	display:block;
	padding: 6px 0px 0px 25px;
	width: 173px;
	font-size: 11px;
  background: #f4f4f4 url("../images/arrow-right.png") 10px center no-repeat;	
}

ul.nice-menu-down ul li:hover{
	background-color: white;
}


ul.nice-menu-down ul li a{
	color: #006699;
  font-weight: normal;
}

ul.nice-menu-down ul li a.active{
	color: #006699;
  font-weight: normal;
}

ul.nice-menu-down ul li a:hover {
	color: #F07012 !important;
	text-decoration:underline;
  font-weight: normal;
}

ul.nice-menu-down li ul li ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li ul li ul {
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 15px;
}

Open in new window


<div class="clear block block-nice_menus">
	<div class="content">
		<ul class="nice-menu nice-menu-down" id="nice-menu-1">
			<li id="menu-183" class="menu-path-home"><a href="home" title="" id="dhtml_menu-183">Home</a></li>
			<li id="menu-1293" class="menuparent menu-path-front"><a href="#">Services</a>
			<ul>
				<li id="menu-522" class="menu-path-node-140"><a href="publications" title="Publications" id="dhtml_menu-522">Publications</a></li>
				<li id="menu-523" class="menu-path-node-141"><a href="consultancy" title="Consultancy" id="dhtml_menu-523">Consultancy</a></li>
			</ul>
			</li>
			<li id="menu-1294" class="menuparent menu-path-front"><a href="#">Company</a>
			<ul>
				<li id="menu-528" class="menu-path-node-144"><a href="about-ecr" title="About ECR" id="dhtml_menu-528">About ECR</a></li>
				<li id="menu-529" class="menu-path-node-145"><a href="how-we-help" title="How we help" id="dhtml_menu-529">How we help</a></li>
				<li id="menu-530" class="menu-path-node-146"><a href="meet-team" title="Meet the team" id="dhtml_menu-530">Meet the team</a></li>
			</ul>
			</li>
			<li id="menu-997" class="menu-path-past-predictions"><a href="past-predictions" id="dhtml_menu-997">Past predictions</a></li>
		</ul>
	</div>
</div>

Open in new window

0
Dennie
Asked:
Dennie
  • 4
  • 3
1 Solution
 
strickddCommented:
0
 
DennieAuthor Commented:
Please read my question before posting!
0
 
MorrisprojectCommented:
ul.nice-menu-down ul li{
z-index:1000;}

ul.nice-menu-down ul {
z-index:3000;}

Add the two lines either to the existing CSS or the bottom.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DennieAuthor Commented:
Doesn't work...
0
 
DennieAuthor Commented:
found it:

ul.nice-menu-down ul li{
position: relative;
z-index:1000;}

#nav {
position: relative;
z-index:3000;}
0
 
MorrisprojectCommented:
Can you show me the whole page? Do you have a link to it, and I will be able to assist quicker.

Thanks
0
 
DennieAuthor Commented:
Some points for your help
0
 
MorrisprojectCommented:
Thanks glad you was able to resolve this
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now