0

私はcssメニューに取り組んでいます。私は既存のコードを編集しようとしています。次の<li>ように、最初のレベルのすべての項目に対して個別の画像を含む css メニューを作成する必要があります。

.leftmenu a.link1 { padding-top: 42px; background:transparent url('../images/home_on.gif');   }
.leftmenu a.link2 { background:transparent url('../images/serv_off.gif'); }
.leftmenu a.link3 { background:transparent url('../images/know_off.gif'); }
.leftmenu a.link4 { background:transparent url('../images/exp_off.gif'); }
.leftmenu a.link5 { background:transparent url('../images/ref_off.gif'); }
.leftmenu a.link6 { background:transparent url('../images/links_off.gif'); }
.leftmenu a.link7 { background:transparent url('../images/contact_off.gif'); }
.leftmenu a.link8 { background:transparent url('../images/blog_off.gif'); }

.leftmenu a.link1:hover { background:transparent url('../images/home_on.gif') -163px -42px no-repeat; background-position:0 0; }
.leftmenu a.link2:hover { background:transparent url('../images/serv_on.gif') -163px -28px  no-repeat;   background-position:0 0;  }
.leftmenu a.link3:hover {background:transparent url('../images/know_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link4:hover { background:transparent url('../images/exp_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link5:hover { background:transparent url('../images/ref_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link6:hover { background:transparent url('../images/links_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link7:hover {background:transparent url('../images/contact_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link8:hover {background:transparent url('../images/blog_on.gif') -163px -28px  no-repeat; background-position:0 0;  }

今、私はこのメニューにフライアウトを追加しようとしていますが、それを行う唯一の方法は次のようなものでした:

li.list2:hover + ul.sub-menu{  
display: block;
position: absolute;
left: 14px;
text-indent: 0px!important;

background-color: black;
margin: 0px;

list-style: none;
top: -20px;
border-radius: 10px;
}
ul.sub-menu{
display: none;
}

この css もメニューに追加されています。

.leftmenu{ width:163px; margin-left:7px; position: relative; z-index: 0;}
.leftmenu ul{ margin:0px; padding:0px;  }
.leftmenu  a { display:block; width:163px; height:0; padding-top:28px; color: white;  text-indent:-3000px; }

サブメニュー項目を表示するように設定されたメニュー項目をロールオフすると、サブメニューが単に消えることを除いて、これは正常に機能しているようです。おそらくz-indexの問題ですが、そうは思いませんか?

最初のメニュー項目の個々の色/画像のスタイルを設定するための素敵なチュートリアルの方向に誰かが私を向けることができれば、おそらくjQueryでそれをゼロから再コーディングしてもかまいません。

4

1 に答える 1

1

これは、最初のレベルのメニューとサブメニュー項目の間にギャップがあるか、「ネストされた ul」が li 内にネストされていないため、ホバー動作が発生します。

あなたは間違いなく後者の問題を抱えています。

<ul>
  <li/>
  <li>
    <a/>      <<< (read below first) in here...
  </li>
  <ul />     <<< this ul should be (see above arrows)
  <li/>
</ul>
于 2013-01-05T14:40:39.050 に答える