css - Transitions for Dropdown Menus in Internet Explorer -
i have created website horizontal drop down menu works fine in browsers except internet explorer. menu html , css, no jquery or javascript.
i've tried , without transitions cannot seem menu work properly. there random occurrences when menu drop-down on hover, not always.
can give suggestions on how make code work internet explorer? in advance.
here's code transitions (and can seen live @ lifestylespacedesign.com):
css:
#menu ul li { z-index: 1; font-family: 'josefin slab', serif; font-weight: 600; font-size: 16px; display: inline-block; margin-right: -4px; position: relative; padding: 15px 30px; border-right: 1px solid #8ec2cf; background: #fff; cursor: pointer; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #menu ul li:hover { color: #000; } #menu ul li ul { padding: 0; position: absolute; top: 50px; left: 0; width: 200px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } #menu ul li ul li { font-family: 'josefin slab', serif; font-weight: 300; display: block; color: #777; border-right: none; background: #fff; }
edit: here jsfiddle html , css. http://jsfiddle.net/mfraser801/djkl5/
Comments
Post a Comment