http://www.caseen.com/store.htmlをご覧ください。 FirefoxとChromeの両方で素晴らしいですが、IE9では見えません。何が起こっているのか見てみる=ie9/CSS:ie9ではフライアウトメニューが機能しませんが、Firefox/Chromeでうまくいきます。
ie9はスタイルシートを無視しているようですが、エラーチェックとie9ダイレクトモードをクリックすると、リンクの周りに巨大な厄介な白い罫線が表示されます。
私のコードを参照してください:
<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>
と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;
}
...私が表示されます私は何をすることができますありがとう。それでもIE9は、ホバースとそのようなものの境界を嫌うように見える=( – Brandon
ありがとう!それは助けになったようだ! – Brandon
素晴らしい。喜んで助けた。 –