CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menumenu
user2181954
user2181954

Reputation:

CSS drop down disappears in IE

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

Upvotes: 0

Views: 3499

Answers (3)

user2181954
user2181954

Reputation:

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

Upvotes: 0

The Mechanic
The Mechanic

Reputation: 2329

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;
}

Upvotes: 0

Krzysztof Bujniewicz
Krzysztof Bujniewicz

Reputation: 2417

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/.

Upvotes: 1

Related Questions