Раскрывающееся меню CSS - PullRequest
Новая
       16

Раскрывающееся меню CSS

3 голосов
/ 03 февраля 2010

пытался получить выпадающий список "чистый css" пытался в течение нескольких дней, чтобы получить "простой" css выпадающий список, который может отображать верхний уровень, а второй скрывается, но не может заставить субпункты отображаться при наведении. любая помощь высоко ценится образец изолирован здесь :: CSS и HTML ниже вставить корзину http://www.webdevout.net/test?01t

Ответы [ 3 ]

2 голосов
/ 03 февраля 2010

Ваши проблемы, вероятно, из-за того, что вы неправильно создали html. Подменю (.level-two) должно быть вложено в элементы .level-one li: 

<div id="navtree">
<ul class="level-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="level-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

Если вы затем используете следующий CSS: 

.level-one {display: inline; position: relative; }

.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.level-one:hover .level-two {display: block; }

Я думаю, этого должно быть достаточно, чтобы вы начали. Не стесняйтесь задавать любые вопросы в комментариях или обновлять свой вопрос.

Кроме того, поскольку я предполагаю, что вы довольно плохо знакомы с этим, я хотел бы предложить вам следующие ссылки:

  • Все притягательное и чудесное в меню CSS: CSS Play , от Stu Nicholls.
  • Для ознакомления с некоторыми практическими рекомендациями и рекомендациями: A List Apart .
  • Краткое введение от Эрик Мейер .

Десятки, если не сотни, можно найти еще ...

1 голос
/ 03 февраля 2010

Второй уровень <ul> уровень должен быть детьми, у вас это: 

<li><a href="/Test2/" title="Test2 page">Test2</a></li>
<ul class="level-two">
 <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>    
</ul>

Изменить на: 

<li><a href="/Test2/" title="Test2 page">Test2</a>
 <ul class="level-two">
  <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>    
 </ul>
</li>
0 голосов
/ 06 февраля 2010

Вот код, который я вроде как доволен, который реализует трехуровневый раскрывающийся список. До сих пор тестировался только в FF: 

/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */
ul.level-one{
  margin-left:-10px; /* lines up 1st item with search box*/
}
ul.level-one li{
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  position: relative;
  line-height: 1.3em;
  }
ul.level-one li:hover {
  background:#999ca0;
  }
.level-two {
  display: none;
  position :absolute;
  Left:0;
  top: 1em;
  }
.level-three {
  display: none;
  position :absolute;
  top: 0em;
  }
.level-one li:hover .level-two {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  }
.level-two li:hover .level-three {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  margin-left: 92px;  /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */
  }
.level-three li:hover {display:block;}
...