Отображение Div с помощью CSS-селектора в UL - PullRequest
Новая
       8

Отображение Div с помощью CSS-селектора в UL

0 голосов
/ 19 января 2011

Я хочу создать раскрывающиеся меню CSS.

Я хочу решить проблему слишком длинных выпадающих элементов в UL. Поэтому я хочу использовать DIV в UL.

Если вы запустите этот пример, заголовок 3 покажет вам выпадающие элементы UL. Я хочу то же самое для заголовка 2 ссылки. Потому что я поместил этот UL в DIV. Так как я могу это сделать?

Код CSS: 

li{
    list-style: none;
    float: left;    
}

li ul {
    display: none;
    background-color: #69f;
}

li:hover > div#mDiv {
    display: block;
}

.menuDiv{
    display: none;
}

li:hover > ul {
    display: block;
}

Markup: 

<ul>
  <li><a href="#">Heading 1</a></li>
  <li><a href="#">Heading 2</a>
    <div class = "menuDiv" id = "mDiv">
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
          <li><a href="#">Subitem 3</a></li>
        </ul>
    </div>
  </li>
  <li><a href="#">Heading 3</a>
    <ul>
      <li><a href="#">Subitem 4</a></li>
      <li><a href="#">Subitem 5</a></li>
      <li><a href="#">Subitem 6</a></li>
    </ul>
  </li>
  </ul>

Ответы [ 3 ]

2 голосов
/ 19 января 2011

Избавьтесь от комбинатора >, чтобы внутренние ul были подобраны независимо от того, находятся они в div или нет: 

li:hover ul {
    display: block;
}
1 голос
/ 19 января 2011

Ваша проблема в том, что из-за вашего css div отображается на :hover, а внутренний ul - нет.

Таким образом, вы можете использовать решение @ BoltClock или изменить: 

li ul {
    display: none;
    background-color: #69f;
}

до: 

li ul {
    background-color: #69f;
}
li > ul {
    display: none;
}
1 голос
/ 19 января 2011

Если требуется > в ваших правилах, измените это правило: 

li:hover > div ul, li:hover > ul {
display: block;

}

...