-2

ここに私のcssメニューがあります：私のcssメニュー

以下のように「私たちについて」にカーソルを合わせると、「私たちの聖職者」サブメニューがすでに表示されていることに注意してください。「私たちの聖職者」にカーソルを合わせたときにそれが表示されるのは望ましくありません。

ここに画像の説明を入力

上のこのスクリーンショットは Firefox のものですが、Webkit ブラウザでは以下のように 1 ～ 2 ピクセルの違いが見られますが、その理由がわかりません。メニューの動作にも影響することがあります。

ここに画像の説明を入力

これがメニューのcssです（私はwordpressを使用しているため、htmlがないことを意味します）：

お気軽に私を手伝ってください。css をクリーンアップしたい場合は、それも可能です。

#navbar {
height: 40px;
padding-left: 10px;
margin-left:-10px;
margin-top: -29px;
margin-bottom:0;
background: #F4DE9F;
width:930px;
/*backgroundborder-top: 2px solid #F4DE9F;
border-bottom: 2px solid #F4DE9F;*/
}

#navbar li {
float: left;
list-style: none;
margin-bottom: 30px;
margin-left:-20px;
}
#navbar li a {
font-family: "MuseoSans_500";
color: #3C290B;
font-weight: 500;
text-transform: uppercase;
}
#navbar li:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar li a:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar .parent > a, #navbar .parent > a:hover {
background: #F4DE9F;
background-position: right;
background-repeat: no-repeat;
}
#navbar ul, #navbar ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: inline-block;
padding: 11px 16.2px 8px;
text-decoration: none;
}

/*
#navbar ul li a:hover {
}
#navbar ul #first a:hover {
}*/

#navbar ul li {
position: relative;
}
#navbar li ul {
display: none;
left: 11px;
position: absolute;
top: 51px;
}
#navbar li ul a {
background: #F4DE9F;
}
#navbar ul ul ul li {
}
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
/*#navbar ul li:hover ul li a, #navbar ul ul li:hover ul li a, #navbar ul ul ul li:hover ul li a {
display: block;
}*/
#navbar ul li:hover ul ul, #navbar ul ul li:hover ul ul {
margin-top: -50px;
margin-left:129px;
}

#navbar ul li:hover ul li a {
padding: 10px 14px 8px;
width: 112px;
}

#navbar ul li:hover ul ul li a {
padding: 10px 14px 8px;
width: 112px;
}
/*#navbar ul ul ul li:hover ul li a {
padding: 0 16px 0 24px;
width: 140px;
}*/
#navbar .children li a:hover {
color: #000;
}
4

2 に答える 2

0

いくつかのルールと多くの具体性で非常に肥大化したと感じるスタイルシートになってしまった場合、#navbar ul ul ul li:hover ul通常は一歩下がって、ルールを少し単純化できるかどうかを確認することをお勧めします。

あなたはWordpressを使用しているので、仕事を楽にする便利なクラスがたくさんあります. この場合.menu-itemと.sub-menu.

menu-css を次のスタイルに置き換えると、質問で言及した問題が解決され、Chrome 23、Safari 6、および Firefox 16 で試行されました。

例: http://jsfiddle.net/5qEwH/

.menu-item {
    display: inline-block;
    position: relative;
    font-family: "MuseoSans_500";
    font-weight: 500;
    text-transform: uppercase;
    background: #F4DE9F;
}

.menu-item:hover {
    background: #FFF1C2;
}

.menu-item a {
    display: inline-block;
    height: 20px;
    padding: 10px;
    text-decoration: none;
    color: #645548;
}
/* Hide submenus by default */
.sub-menu {
    display: none;
    position: absolute;
    width: 150px;
    top: 40px;
}

.sub-menu .menu-item {
    width: 100%;
}
/* The second level sub-menu should be moved to the right */
.sub-menu .menu-item > .sub-menu {
    top: 0;
    left: 150px;
}

/* Show submenus on hover */
.menu-item:hover > .sub-menu {
    display: block;
}
于 2012-11-21T21:01:29.827 に答える
0

最初にスタイルを正規化して、すべてのブラウザーがいくつかの基本的な HTML 要素に対して同じスタイルを取得するようにすることは、優れた CSS プラクティスです。

これをスタイルシートの先頭に追加します

* { margin: 0px; padding: 0px; border: 0px; text-decoration: none }

また、すべてのブラウザーと html5 をカバーする正規化用の包括的なスタイルシート ファイルもあります。これを style.css ファイルの前に追加してみてください。

リンクは次のとおりです。http://necolas.github.com/normalize.css/

ホバーの問題については、このcssの変更を試してください

交換

 #navbar ul li:hover ul {
     display: inline-block;
}

    #navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
        display: block;
        margin: -11px 0 0 -11px;
    }

と

#navbar ul li:hover > ul {
     display: inline-block;
}
#navbar ul li:hover > ul, #navbar ul ul li:hover > ul, #navbar ul ul ul li:hover > ul {
    display: block;
    margin: -11px 0 0 -11px;
}

それが役に立てば幸い ：）

于 2012-11-21T19:48:04.360 に答える