0

メニューを作成しました。これはfirefoxでは問題なく機能しますが、google chromeではホバーが表示されません。また、ブラウザのサイズを変更すると、メニューの一部が非表示になり、スクロールできなくなり、 MENUwidth:100%;で試しましたが、これを行ってブラウザのサイズを変更すると、クラスのレイアウトが歪んでメニューの行から外れて表示され、メニューが歪んでいます。とにかくこの問題を解決する方法はありますか: メニューの歪みを避けるために、メニューの幅を 1366px に強制的に定義します。助けてください。

#mainmenu {
    width:1366px;
    height:50px; 
    /*position:relative;*/
    position:fixed;
    top:18px;
    padding-left:200px;  
    line-height:50px;
    background:#0b2c3d;
    z-index:10;      
    box-shadow:5px 0px 15px #7e7a7a; 
}
#mainmenu, #dd_home, #dd_profile, #dd_achv, #dd_contact,#dd_login {
    cursor:pointer;
}
#mainmenu ul {
    list-style-type:none;
    margin:0px;
    padding:0px;        
}
#mainmenu ul li {
    text-decoration:none;
    float:left;
    /*border-right-style:dotted;*/
}
#mainmenu ul li a {
    text-decoration:none;
    display:block;
    width:150px;
    text-align:center;
    text-transform:uppercase;           
    color:white;
}
#mainmenu ul li.home {
    width:150px;
    text-align:center;
    margin-top:-5px;
    border-bottom:5px solid #0a68fb;
}
#mainmenu ul li.home:hover {
    display:block;
    background-color:#0a68fb;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.profile {
    margin-top:-5px;
    border-bottom:5px solid #ed4901;
}
#mainmenu ul li.profile:hover {
    display:block;
    background-color:#ed4901;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.achv {
    margin-top:-5px;
    border-bottom:5px solid #27fb06;
}
#mainmenu ul li.achv:hover {
    display:block;
    background-color: #27fb06;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.contact {
    margin-top:-5px;
    border-bottom:5px solid #b70bfb;
}
#mainmenu ul li.contact:hover {
    display:block;
    background-color:#b70bfb;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.contact:checked {
    margin-top:-5px;
    border-bottom:10px solid #b70bfb;
}
#mainmenu ul li.login {
    margin-top:-5px;
    border-bottom:5px solid #36b096;
}
#mainmenu ul li.login:hover {
    display:block;
    background-color:#36b096;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.nepal {
    margin-top:-5px;
    border-bottom:5px solid #f8d605;
    overflow:hidden;
}

HTML

<div id="mainmenu">
    <ul>
        <li class="home"><a href="about.aspx"> Home</a>
        <li class="profile"><a href="profile.aspx" >Profile</a>
        <li class="achv"><a href="achv.aspx">achievements</a>
        <li class="contact"><a href="Contact.aspx">Contact</a>
        <li class="login"><a href="login.aspx">Log in</a>
        <li class="nepal"><a href="#">jaya nepal</a></li>
    </ul>
</div>

JSFiddle: jsfiddle.net/gzeLS

4

2 に答える 2

1

スタイルdisplay:blockから を削除します。:hover

jsfiddle.net/gzeLS/1

display:blockまたは、非ホバー スタイルに追加します。

jsfiddle.net/gzeLS/2

なぜChromeがそれを好まないのかわかりません。Chromeのバグだと思います。

メニューのサイズを変更するには、 と を使用して作業をmax-width行いmin-widthます。テキストが重なり始める前に、幅が約 600px しか取得できません。メニューに を付けて重複を防ぎますmin-width。

jsfiddle.net/gzeLS/3

しかし、既にお気づきのように、ウィンドウが小さすぎるとメニューの一部が非表示になります。ボディにa を設定しmin-widthてスクロール バーを表示しても、 を使用しているため、メニューをスクロールすることはできませんposition: fixed。ウィンドウが特定の幅を下回る場合は、メディア クエリを使用してフォント サイズを縮小することをお勧めします。

jsfiddle.net/gzeLS/4

編集：これは、ウィンドウサイズに関係なくセンタリングが機能する3番目のjsFiddleに到達するために行った変更の内訳です。

  • メニューをページいっぱいに表示するには、 を指定するのではなく、とwidthを指定leftしますright。
  • メニュー項目を中央に配置するには:
    • text-align: centerではなく、メニューで使用しますpadding。これにより、さまざまなウィンドウ サイズが考慮されます。
    • に設定display: inline-blockして、ulセンタリング可能にします。
    • と をセットwidthしmax-widthますul。を使用すると、パーセントで要素widthのサイズliを変更できます。これにより、ウィンドウが小さすぎる場合に縮小できます。そして、実際にメニュー項目を中央に配置して、ウィンドウがメニューを全幅に収めるのに十分な幅があるmax-width場合、左右に余白を設けてみましょう。
  • 画面が小さすぎる場合にメニュー項目が折り返されないようにするには、 に設定white-space: nowrapしulます。
  • ウィンドウが小さすぎてメニュー全体に収まらない場合に、メニュー項目のテキストが重ならないようにするには:
    • メニューに設定min-widthします。
    • overflow: hiddenメニュー項目に設定します。
  • li簡単にするために、クラスごとのリスト項目の冗長なスタイルもセレクターに統合します。

メニューを小さなウィンドウに合わせて表示したままにするために、4 番目の jsFiddleで行った変更を次に示します。

  • min-widthメニューから削除して、ウィンドウに合わせて縮小できるようにします。
  • ウィンドウ サイズが小さくなるにつれて、メディア クエリ スタイルを追加して、フォント サイズを徐々に小さくします。
@media all and (max-width: 640px) { #mainmenu { font-size: 90%; } }
@media all and (max-width: 590px) { #mainmenu { font-size: 80%; } }
@media all and (max-width: 530px) { #mainmenu { font-size: 70%; } }
@media all and (max-width: 468px) { #mainmenu { font-size: 60%; } }
于 2013-03-12T18:04:22.493 に答える
0

たとえば、ホーム リンクでこの小さな変更を行うと、次のようになります。

#mainmenu ul li.home:hover

に

#mainmenu ul li.home a:hover

次に、hover プロパティが Chrome と Firefox で適切に表示されることに気付くでしょう。

この修正のための JSFiddle

アップデート

そして、これが2番目の問題の修正です。

コンテナ内で aを中央に配置するにtext-alignは、マスター div の をに設定する必要があります。典型的なものは機能しません。画面が横に並んだメニュー項目よりも小さい場合に壊れないように、 も追加しました。centerulmargin: 0 auto;white-space:nowrap;

お役に立てれば。

于 2013-03-12T17:58:45.990 に答える