Chrome ではうまく機能する CSS メニューがありますが、Firefox ではまったく悲惨です。私はさまざまなポジショニングなどを試しましたが、少なくとも50の異なる方法で修正されていません。こちらのFFでチェックしてください:http: //morrisonhosting.com/ryan/BusinessSite/index.html
2 に答える
2
このフィドルを見て、 そこからコードをコピーして貼り付けるだけで、メニューはすべてのブラウザーで機能します。つまり、ie7がサポートされているので、これをチェックしてください:-)ここにhtmlコードがあります:-)
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul class="subnavi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">FaQs</a></li>
<li><a href="#">Contact</a>
<ul class="subnavi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
</ul>
ここに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;
}
于 2013-04-29T04:59:00.793 に答える
0
次のようなクリーンな例を使用してコードを再構築することをお勧めします。
http://www.handy-html.com/create-a-simple-css-dropdown-menu/
今のところ、あなたのコードは Chrome でも機能しない (メイン メニューの 2 番目から 3 番目のオプションに移動する) ため、大規模な運搬が適切なオプションのようです。
上記のコードは、私がテストしたすべてのブラウザー (Safari、Chrome、FF) でうまく機能しました。
幸運をお祈りしています、
于 2013-04-29T05:10:55.840 に答える