Подскажите, как сделать на css

[Imperil]

Подскажите, как сделать на css "открывающийся список".

Есть стандартный список:

<div id="sidebar">

<ul>

<li><a href="#">СМИ</a></li>

<ul>

<li>Здесь пока-что пусто</li>

</ul>

<li><a href="#">реклама</a></li>

<ul>

<li>Здесь пока-что пусто</li>

</ul>

</ul>

Как сделать чтобы вложенный список был спрятан, а при наведении выпадал вниз?

И так уже и так пробовал - не получается.

Edited January 17, 2012 by Imperil

[Softlink]

И так уже и так пробовал - не получается.

Ну так показывайте как пробовали.

[sammasati]

Если на CSS и по наведению, то так:

<ul>
  <li>pewpew
    <ul>
      <li>block</li>
    </ul>
  </li>
</ul>

li>ul {
  display: none;
}
li:hover>ul {
  display: block;
}

[dostel1]

http://www.dynamicdrive.com/style/csslibrary/category/C1/P0/

[Imperil]

Если на CSS и по наведению, то так:

<ul>
  <li>pewpew
    <ul>
      <li>block</li>
    </ul>
  </li>
</ul>

li>ul {
  display: none;
}
li:hover>ul {
  display: block;
}

Что-то я не встречал до этого в CSS обозначения ">", как здесь написано после hover: li:hover>ul

Что он значит?

http://www.dynamicdrive.com/style/csslibrary/category/C1/P0/

Спасибо. Полезный ресурс. Буду знать

[sammasati]

Что-то я не встречал до этого в CSS обозначения ">", как здесь написано после hover: li:hover>ul

Что он значит?

http://htmlbook.ru/samcss/dochernie-selektory

[Imperil]

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

Подскажите пожалуйста.

<div id="sidebar">

<ul>

<li class="strategicheskoe_planirovanie"><a href="#">Стратегическое планирование</a></li>

<ul class="submenu_sidebar">

<li>Для Вас мы проведем комплекс работ

</li>

<li class="design"><a href="#">Дизайн</a></li>

<ul class="submenu_sidebar">

<li>Для Вас настоящий креатив в дизайне рекламы!

</li>

</ul>

<li class="reklama_v_smi"><a href="#">Реклама в СМИ</a></li>

<ul class="submenu_sidebar">

<li>Здесь пока-что пусто

</li>

</ul>

<li class="prodvizhenie_v_internet"><a href="#">Продвижение в интернет</a></li>

<ul class="submenu_sidebar">

<li>Здесь пока-что пусто

</li>

</ul>

<li class="reklamnaya_poligrafiya"><a href="#">Рекламная полиграфия и сувенирная продукция</a></li>

<ul class="submenu_sidebar">

<li>Здесь пока-что пусто

</li>

</ul>

<li class="btl"><a href="#">BTL и PR</a></li>

<ul class="submenu_sidebar">

<li>BTL и PR обладает большим разнообразием

</li>

</ul>

<li class="naruzjnaya_reklama"><a href="#">Наружная реклама</a></li>

<ul class="submenu_sidebar">

<li>Здесь пока-что пусто

</li>

</ul>

</ul>

</div> <!--end sidebar-->

[sammasati]

Ну неудобно такую кашу читать. Выкладывайте ваш код на http://jsfiddle.net/

P.S. Выпадающий список должен быть внутри тега <li>, из которого он выпадает.

[Imperil]

Ну неудобно такую кашу читать. Выкладывайте ваш код на http://jsfiddle.net/

P.S. Выпадающий список должен быть внутри тега <li>, из которого он выпадает.

Поправил http://jsfiddle.net/muttV/

[sammasati]

Там справа в верхнее окошко можно css вставлять. Ну это на будущее.

Вот этот блок:

<ul class="submenu_sidebar">
               <li>Для Вас мы проведем комплекс работ</li>
            </ul> 

должен находится внутри этого

<li class="strateg"><a href="#">Планирование</a></li>

Вот. Посмотрите внимательней на структуру:

<ul>
  <li><a href="#">pewpew</a>
    <ul>
      <li>block</li>
    </ul>
  </li>
</ul>

[Imperil]

Вот я дурак! Спасибо Вам большое я бы еще доооолго сидел.