Помогите с hover

[sarootua]

Есть поле ввода поискового запроса
html
<div class="form-search">
<input id="search" type="text" class="input-text" name="q" value="" autocomplete="off">
css
.header .form-search input {

1. width: 335px;
2. margin-right: -4px;
3. color: #ccc;
4. height: 33px;
5. line-height: 22px;
6. font-size: 14px;
7. padding: 0 0 0 0px;
8. padding-left: 10px;
9. background: url(Для просмотра ссылки Войди или Зарегистрируйся);

}

И есть блок "популярных запросов"
Html
<div class="search_term">
<div id="popSearchTerms">
<ul class="term-list">
<li class="icon-term">Популярные запросы:</li>
<li><a href="Для просмотра ссылки Войди или Зарегистрируйся">4</a></li>
<li><a href="Для просмотра ссылки Войди или Зарегистрируйся">Bat</a></li>
<li><a href="Для просмотра ссылки Войди или Зарегистрируйся">Еще »</a></li>
</ul>
</div>
</div>

css прописан по умолчанию
.search_term{
padding:4px 0 0 0; float:left; overflow:hidden;
width: 575px;
margin-left: 1px;
height: 285px;
border-top-width: 10px;
margin-top: 10px;
box-shadow: 2px 2px 3px #ddd;
padding-top: 0px;
z-index: 999;
position: absolute;
background: white;
display: none;
}
нужно что бы при наведении мышки в поле ввода запроса отобразился блок популярных запросов
т.е.
.search_term{display: block;}
Я что то не пойму что делаю не так
.header .form-search:hover .search_term {display:block;} не работает

 

[dema8912]

Может и не работать, смотря как эти 2 блока в html относительно друг друга стоят... если .search_term внутри .header .form-search то ваш цсс будет работать... а вообще посмотреть бы ссылку хотелось

 

[loasa]

Тут думаю нужно в сторону js копать

 

[Shadez]

Чтобы правило

.header .form-search:hover .search_term {display:block;}

работало, div.search_term должен находиться внутри div.form-search