0

私は自分のウェブサイトに wordpress の 21 のテーマを使用しています。今、私は自分のサイトのドロップダウン メニューを作りたいと思っています。デフォルトでは、ワードプレスにはドロップダウンメニュー機能があります。メインメニューにカーソルを合わせると、サブメニュー部分が表示されます。例えば ​​：-

次のようなメイン メニューがあります。について | コンタクト

アバウトメニューにカーソルを合わせると、「アバウト」メニューのサブメニューが表示されます

ホーム | について | コンタクト

   Our Services

   History

   Our Staff

履歴メニューにカーソルを合わせると、以下のような履歴メニューのサブメニューが表示されます:-

ホーム | について | コンタクト

   Our Services

   History

      History 1
      History 2
      History 3

   Our Staff

しかし、Aboutメニューにカーソルを合わせたときにHistoryのサブメニューを表示したい。Aboutメニューにカーソルを合わせると、次のように表示されます:-

ホーム | について | コンタクト

   Our Services

   History

      History 1
      History 2
      History 3

   Our Staff

WordPressメニューで出力を取得するのを手伝ってください。

#access {
  background: #00ADEE; /* Show a solid color for older browsers */
  clear: both;
  display: block;
  width: 915px;
}
#access ul {
  font-size: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#access li {
  float: left;
  position: relative;
}
#access a {
  color: #eee;
  display: block;
  line-height: 12px;
  padding: 4px 9px; 
  text-decoration: none;
  background: url(images/menu-border.png);
  background-position: right 6px;
  background-repeat: no-repeat;
  text-transform: lowercase;
}
#access ul ul {
  display: none;
  float: left;
  margin: 0;
  position: absolute;
  left: 11px;
  width: 252px;
  z-index: 99999;
  background: #FFFFFF;
  padding: 0 4px;
  border: 1px solid #00AEEF;
}
#access ul ul li {
}
#access ul ul ul {
  left: 23%;
  top: 0;
  border: none;
  width: 150px;
}
#access ul ul ul li{
  border: none;
  width: 112px;
  background:url(images/list.png);
  background-position: 0 10px;
  background-repeat: no-repeat;
  background-color: #FFF;
  width: 185px;
}
#access ul ul ul a{
  border: none;
  background: transparent;
}
.sub-menu .menu-item-object-custom a:hover{
  height: 40px;
}
#access ul ul a {
  border-bottom: 1px solid #BCBEC0;
  color: #000;
  font-size: 10px;
  font-weight: normal;
  height: auto;
  line-height: 1.4em;
  padding: 5px 7px;
  width: 237px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
  color: #000;
}

#access ul ul  > a {
  color: #000;
}

#access li:hover > a,
#access a:focus {
  color: #FFFFFF;
}
#access ul li:hover > ul {
  display: block;
}
#access ul ul  .current_page_item > a {
  color: #00ADEE;
  font-weight: bold;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
  color: #FFFFFF;
}
4

1 に答える 1

0

基本的に、li 要素に :hover が定義されているルールを見つける必要があります。通常は次のようになります。

li:hover ul {
    display: block;
}

第 2 レベルのメニューを表示するには、次のようなものを追加する必要があります。

li:hover ul ul {
    display: block;
}

これは理論的にはこうあるべきです。正確な変更を伝えるには、メニューを記述する CSS の部分を確認する必要があります。

于 2012-09-05T10:31:25.290 に答える