CODEWITHSUNDEEP
css
Reis
Reis

Reputation: 646

CSS Menu Help (IE Not working & Transation)

This menu is not working in any IE version. How can I get it working ?

I also would like to add transition, is there a way to add it so it opens slowly from top ?

http://tinyurl.com/7rxskdj

#nmenu {width:700px;}
#nmenu, #nmenu ul {list-style:none;padding:0;margin:0;}
#nmenu li {float:left;text-transform:uppercase;margin-left:45px;position:relative;}
#nmenu li.frst {margin:0;}
#nmenu ul {width:100px;display:none;position:absolute;top:30px;}
#nmenu ul li {width:100px;float:left;background-color:rgba(122,202,222,0.5);margin:0;padding:0;}
#nmenu li a {font: bold 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#939598;}
#nmenu li:hover ul {display:block;}
#nmenu li > ul {top: auto;left: auto;}

Upvotes: 0

Views: 43

Answers (2)

Zeta
Zeta

Reputation: 105886

You don't provide a doctype, so IE renders it in quirksmode. Use valid HTML5 (<!DOCTYPE html>) or HTML4. Transitions are a little bit harder, as you need specific values to animate a CSS property. You could instead animate the opacity with transition: opacity 1s ease.

See also:

Upvotes: 1

Paulooze
Paulooze

Reputation: 1237

I am not sure about IE compatibility with CSS-only, but I am sure it will work using jquery... here is simple code:

$('#nmenu li').hover(function() {
    $(this).find('ul').toggle();
});​

Upvotes: 1

Related Questions