0

Chrome ではうまく機能する CSS メニューがありますが、Firefox ではまったく悲惨です。私はさまざまなポジショニングなどを試しましたが、少なくとも50の異なる方法で修正されていません。こちらのFFでチェックしてください：http: //morrisonhosting.com/ryan/BusinessSite/index.html

4

2 に答える 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 に答える