0

I know there are plenty of questions about this already I have been through them and the answers dont solve my problem.

I have made a CSS drop down menu and it works in chrome and firefox. But when I check it in IE the drop down menu disappears. When you hover over the top menu the drop down appears, then as soon as you try and move the cursor down to the drop down menu it disappears.

I cant show you the website as it isnt live yet but here is the HTML and CSS.

#nav{
         margin-top:15px;
         z-index: 100;
}

#nav ul{
        margin:0;
        padding:0;
        list-style: none;
        font-family: Arial, Verdana;
        z-index: 100;
}

#nav ul li{
        display:block;
        margin-right:10px;
        float:left;
        position: relative;
        z-index: 100;
}

#nav li.end{
        margin-right:0px;
}

#nav li ul { 
        display: none;
}

#nav ul li a {
        display: block;
        text-decoration: none;
white-space: nowrap;
padding:0;
margin:0;
}

ul li a:hover { 
        background-color: #814b97; 
}

#nav li:hover ul {
display: block;
position: absolute;
}

#nav li:hover li {
float: none;
font-size: 11px;
}

#nav img{
        border:none;
}

li:hover a { 
        background: #617F8A; 
}

li:hover li a:hover { 
        background: #95A9B1; 
}

And the HTML

<div id="nav">
    <ul>
        <li><a href="#.asp"><img src="images/nav-home.jpg"></a></li>
        <li><a href="#.asp"><img src="images/nav-products.jpg"></a>
            <ul>
                <li><a href="#">Safety</a></li>
                <li><a href="#">Power</a></li>
                <li><a href="#">Sensors</a></li>
                <li><a href="#">Logic</a></li>
                <li><a href="#">Connection Devices</a></li>
                <li><a href="#">Operator Interface</a></li>
            </ul>
        </li>
        <li><a href="#.asp"><img src="images/nav-faq.jpg"></a></li>
        <li><a href="#.asp"><img src="images/nav-contact.jpg"></a></li>
        <li class="end"><a href="#.asp"><img src="images/nav-delivery.jpg"></a></li>
    </ul>
</div>

The Version I am using is IE9

Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54
  • 1
    Please specify your version of IE as it changes behavior from version to version, pretty buggy browser to deal with.. – MarmiK Apr 26 '13 at 08:26
  • Edited Post to include IE version...Just to clarify, it's IE9 –  Apr 26 '13 at 08:30
  • please try by changing display:block; to display:inline; in #nav ul li and remove display: block; in #nav li:hover ul. – venki Apr 26 '13 at 08:40
  • Fiddle for lazy guy http://jsfiddle.net/MarmeeK/nBKYu/ :) – MarmiK Apr 26 '13 at 08:41
  • jsfiddle does not represent how it looks in IE9. and it does not work in IE9 for me –  Apr 26 '13 at 08:48
  • unable to help; using Ubuntu :| – xkeshav Apr 26 '13 at 08:53
  • its is if you run fiddle in IE 9 that will/should behave in same manner, I have pasted your code only, to help others, Yes I checked the same in IE9 it does not work in compatibility mode, else works fine. I am able to conclude the problem running busy will come back to this later on – MarmiK Apr 26 '13 at 09:03
  • this may be of interest http://stackoverflow.com/questions/6619156/hover-is-not-working-properly-in-ie9#answer-8194139 – Pebbl Apr 26 '13 at 09:03

3 Answers3

1

Do you have a doctype html5 declaration (<!DOCTYPE html>) in your html? If not, hover pseudo-class may not work in IE on anything other than a. It's a common bug there.

Additionally, you can force IE if possible to work in IE9 (or just latest available) mode by setting a meta tag (not recommended, it's not valid html) or sending a response header: X-UA-Compatible: IE=edge, although :hover problem is supposedly fixed since IE7.

Furthermore, try setting

nav ul li ul:hover {
    display: block;
}

Sources: past problems with ie and http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/.

Krzysztof Bujniewicz
  • 2,407
  • 21
  • 16
0

you can use this below code this navigation dropdown made by pure css and tested on ie7 and is working fine take a look of this fiddle http://jsfiddle.net/sarfarazdesigner/u65SB/ here is the html code

<ul id="nav">
    <li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Services</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul>    
    </li>
    <li><a href="javascript:;">Products</a></li>
    <li><a href="javascript:;">FaQs</a></li>
    <li><a href="javascript:;">Contact</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul> 
    </li>
    <li><a href="javascript:;">Blog</a></li>
</ul>

and css 

#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{ 
    float:left; 
    border-right:1px solid #ccc;
    position:relative;
}
ul#nav li a{
    padding:0 15px;
    display:block;
    text-decoration:none;
    color:#fff;
}
#nav li a:hover{
    background:#ccc;
}
ul.subnavi{
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}
ul.subnavi li{
    display:block;
    width:120px;
    float:none;
}
ul#nav li ul.subnavi li a{
    color:#333;
}
ul#nav li ul.subnavi li a:hover {
    background:#333;
    color:#fff;
}
#nav li:hover ul{
    display:block;
}
The Mechanic
  • 2,301
  • 1
  • 26
  • 37
0

I've found my solution,

Its not perfect but it will do.

I just added a Background-color to the li ul {}

it allowed the drop down menu to stay when hovering over it in IE the only problem is you need to click the actual link text to follow the link where as in the other browsers you can click anywhere on the drop down area.

This is fine for me now though.

Thanks for all your replies everyone