CODEWITHSUNDEEP
phphtmlcss
Stephen Wolfe
Stephen Wolfe

Reputation: 215

CSS menu ul ul li drop down menu not working in i.e 7 or 6 please help

I'm having issues with my drop down menu on i.e 6/7 where it is dropping down behind other divs on my site:

http://www.bankruptcy.co.uk/

I have fixed it in other browsers by using zindex.

Any help will be great thanks.

Here is the menu code.

// i cannot post the HTML becuase it has too many links in it.

And here is the CSS.

/* JS disabled styles */
nav li:hover ul { display:block; }

/* base nav styles */
nav {
    display:block;
    margin:0;
    position:relative;
    background-color:#1D1AB2;
    border-top-width: 1px;
    border-bottom-width: 3px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #222;
    border-bottom-color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 35px;
}
nav ul {
    padding:0;
    margin:0;
    background-color: #1D1AB2;
}
nav li { position:relative; float:left; list-style-type:none;   z-index: 199;
}
.li80 {
    position:relative;
    float:left;
    width: 80px;
}
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a {
    display:block;
    padding:10px 17px;
    border-left:1px solid #999;
    color:#FFFFFF;
    text-decoration:none;
    font-weight: bold;
}
nav li a:hover {
    color:#036;
    background-color: #FFD073;
}
nav li a:focus { outline:none; text-decoration:underline; }

/* base nav styles */
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#3333cc;
    z-index: 99;
}
nav ul ul li { float:none; }
nav ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:12px;
}

Upvotes: 0

Views: 986

Answers (3)

clairesuzy
clairesuzy

Reputation: 27644

I see you already have the "hover on other elements" working, so try this

remove position: relative from 

nav li { 
   position:relative; float:left; list-style-type:none;   z-index: 199;
}

and add a new rule below it:

nav li:hover {
 position: relative;
}

does that help?

Upvotes: 0

user474470
user474470

Reputation:

You can't use hover on li element in IE 6.

There's some javascript resource below, that allows you to do that. Here's link.. include this script before css link and everything will be ok ;)

http://ipkhakadze.com/resources/js/menu.htc

Upvotes: 1

fabrik
fabrik

Reputation: 14365

CSS :after property isn't recognized in IE6/7. I'm afraid you need to figure out an other solution for that.

Upvotes: 0

Related Questions