Solved

CSS IE li:hover z-index

Posted on 2009-05-15
6
974 Views
Last Modified: 2012-06-27
I'm currently having trouble getting a flyout menu in the left navigation to have the proper working z-index in IE. When you roll over plugs, the flyout menu should hover on top of all other items, but it does not in IE. I do realize that IE has a bug in this area, and I've tried 2 javascript fixes but I still can't manage to get it to work! Any help would be appreciated...

The link to the page I'm having trouble with is here:
http://209.162.183.249/
#LEFTNAV {

	margin: 20px 0px 0px 0px;

	float: left;

	width: 15%;

	background-color: #272750;

	-moz-border-radius: 0px 7px 7px 0px;

	-webkit-border-top-right-radius: 7px;

	-webkit-border-bottom-right-radius: 7px;

	border-radius: 0px 7px 7px 0px;

	padding: 10px 10px 10px 0px;

}

 

#LEFTNAV ul {

	position: relative;

	background-color: #cccccc;

	padding: 3px;

	-moz-border-radius: 0px 7px 7px 0px;

	-webkit-border-top-right-radius: 7px;

	-webkit-border-bottom-right-radius: 7px;

	border-radius: 0px 7px 7px 0px;

	margin: 0px;

	list-style: none;

 

}

 

#LEFTNAV ul li a {

	display: block;

	text-decoration: none;

	font-family: Verdana;

	font-size: 11px;

	font-weight: normal;

	color: #000000;

	padding: 1px 0px 1px 10px;

	height: 1%;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #666666;

	}

	

#LEFTNAV ul li a:hover{

	color: #ffffff;

}

 

#LEFTNAV ul li:hover {

	background-color: #666666;

}

 

#LEFTNAV ul Li {

	margin: 1px;

	width: 100%;

}

 

#LEFTNAV .LeftNav_Headers {

	padding: 7px 0px 3px 10px;

	margin: 0px;

}

 

#LEFTNAV ul li.DisplayFlyout ul.FlyoutMenu {

	z-index: 100;

	display: none;

	position: absolute;

	top: 0px;

	left: 150px;

	margin: 0px;

	width: 80px;

}

 

#LEFTNAV ul ul {

	background-color: #cccccc;

	list-style: none;

	border: solid 2px #000000;

	-moz-border-radius: 0px 0px 0px 0px;

	-webkit-border-top-right-radius: 0px;

	-webkit-border-bottom-right-radius: 0px;

	border-radius: 0px 0px 0px 0px;

}

 

#LEFTNAV ul li.DisplayFlyout:hover ul.FlyoutMenu{

	display: block;

	

}

 

 

<ul>

    <li class="DisplayFlyout">

    <a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=plugs">Plugs &amp; eyelets</a>

        <ul class="FlyoutMenu">

        <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=plugs&gauge=18g">18g</a></li>

        <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=plugs&gauge=18g">16g</a></li>

        <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=plugs&gauge=14g">14g</a></li>

        <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=plugs&gauge=12g">12g</a></li>

        </ul>

    </li>

    <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=tapers">Tapers &amp; stretching</a></li>

    <li><a href="http://<%= Request.ServerVariables("server_name") %>/products.asp?jewelry=barbell">Straight barbells</a></li>

</ul>

Open in new window

0
Comment
Question by:twentythree
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24397668
The problem may be elsewhere on the page. Check the declarations on the other items on the page. For z-index to work properly, the div that is conflicting has to be absolute positioned with a lower z-index. Without the rest of the code, I can't tell.
0
 

Author Comment

by:twentythree
ID: 24397692
Here's a link to the entire page: http://209.162.183.249/
0
 
LVL 16

Expert Comment

by:s8web
ID: 24397789
Try putting z-index:50 on leftnav and z-index:100 on leftnav ul and see what happens.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:twentythree
ID: 24397860
Doesn't work :(
From what I've read online if you're using li:hover rather than a:hover in IE, then it nullifies the ability to use the z-index on the CSS. It's like it doesn't read it or something and you have to resort to using javascript or something to override it.

So far I haven't been able to find any way to fix it. But it seems to be a common bug.
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 24402876
hmm... have you checked out superfish http://users.tpg.com.au/j_birch/plugins/superfish/#examples

There's a class set up for vertical only uses (separate stylesheet). I've used it in a couple places. You can customize it for your situation. It uses the jquery library which is reasonably lightweight in it's compressed form.

It's not the magic bullet, you will have to rework a little (attach classes to your existing <ul> but in the end it will accomplish what you're looking for.
0
 

Author Closing Comment

by:twentythree
ID: 31581965
Well it's not quite what I had in mind... but at least it works! Plus it has nicer effects and is pretty fast too... thanks :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now