ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome
Posted
by
Brandon
on Stack Overflow
See other posts from Stack Overflow
or by Brandon
Published on 2012-03-28T17:18:19Z
Indexed on
2012/03/28
17:29 UTC
Read the original article
Hit count: 331
Please see this flyout menu: http://www.caseen.com/store.html. It looks amazing in both Firefox and Chrome, but not in IE9! Trying to see what is going on =(.
It looks like ie9 is completing ignoring the stylesheet, but in error checking and clicking ie9 direct mode, it shows up however VERY ugly with huge nasty white borders around the links!
Please see my code:
<div class="flyout">
<ul>
<!--START: CATEGORIES-->
<!--START: CATEGORY_FORMAT-->
<li><a href="view_category.asp?cat=CATID"> CATEGORY</a>
<!--END: CATEGORY_FORMAT-->
<ul><!--START: SUB_CATEGORY_FORMAT-->
<li><a href="view_category.asp?cat=CATID"> CATEGORY</a></li>
<!--END: SUB_CATEGORY_FORMAT--></ul>
<!--END: CATEGORIES-->
</li>
</ul>
</div>
AND CSS
.flyout {
width: 130px;
height: auto;
position:relative;
margin: -10 0;
padding: 0;
z-index:10000;
}
.flyout ul li a {
display:block;
text-decoration:none;
color: #fff;
width: 130px;
border: solid;
border-color: #000;
border-width: 0 0 0 5px;
text-align:left;
font-size:12px;
line-height: 25px;
}
.flyout ul {
padding:0px;
list-style-type: none;
}
.flyout ul li {
float:left;
margin-right:1px;
position:relative;
}
.flyout ul li ul {
display: none;
}
.flyout ul li:hover a {
border: solid;
border-color: #fff;
border-width: 0 2 0 5px;
color: #60dfe5;
}
.flyout ul li:hover ul {
display:block; position:absolute; top:0;
left:130px;
width:10px;
}
.flyout ul li:hover ul li a.hide {
background:#000;
color:#fff;
}
.flyout ul li:hover ul li:hover a.hide {width:180px;}
.flyout ul li:hover ul li ul {display: none;}
.flyout ul li:hover ul li a {
display:block;
background:#000;
color:#60dfe5;
width:200px;
}
.flyout ul li:hover ul li a:hover {
background:#000;
color:#fff;
}
Thanks,
Brandon
© Stack Overflow or respective owner