Есть причина, у вас есть #category-list вне #categories-ctainer?
Если вы переместите #category-list в #categories-ctainer, вы можете сделать его работу просто отлично. Вот example (я никогда не могу заставить jsfiddle работать для меня).
После этого просто используйте то, что вы пытались раньше, display: none и display:block на #categories-ctainer:hover. Добавьте в некоторое абсолютное позиционирование и, вуаля.
HTML:
<div id="searching-c">
<input id="search-input" type="text" name="search_field" value="" placeholder="search">
<div id="categories-ctainer" name="categories">
<p>Categories</p>
<img src="../images/arrowdown.png" alt="">
<div id="category-list">
<a class="category-item">
<p> Food</p>
</a>
...
<a>
<p> Food</p>
</a>
</div>
</div>
<button type="submit" id="button-search" value="send"></button>
</div>
CSS:
#searching-c {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#search-input {
width: 40%;
margin: 2% 1%;
font-weight: 700;
float: left;
}
#category-list {
width: 100%;
border: 1px solid darkgray;
background: #e2e2e2;
position: absolute;
opacity: 0.90;
top: 100%;
z-index: 10;
/*because its absolute*/
left: 0;
display: none;
}
div#categories-ctainer:hover #category-list {
display: block;
}
a.category-item {
float: left;
width: 26%;
margin: auto 2%;
padding-left: 2%;
text-decoration: none;
}
a.category-item p {
font-weight: bold;
text-decoration: none;
color: rgb(58, 56, 56);
}
a.category-item p:hover {
color: #5DA5D1;
text-decoration: none;
cursor: pointer;
}
div#categories-ctainer {
width: 48%;
margin: 2% 1%;
height: 100%;
background-color: #fff;
border: 1px solid darkgray;
float: left;
position: relative;
}
div#categories-ctainer p {
color: #A9A9AB;
font-weight: 700;
float: left;
margin: 0;
position: relative;
}
div#categories-ctainer img {
float: right;
margin: 0;
height: 19px;
position: relative;
}
#button-search {
width: 3%;
float: left;
margin: 2% 1%;
}
Я также удалили line-height:.5 вы были на .category-item.
Это хорошо работает, потому что теперь она находится в пределах #categories-ctainer, когда вы нависли над #category-list вы все еще витает на #categories-ctainer, чтобы он не исчезает на вас.
Надеюсь, это поможет!
Опубликовать свой javascript – vel
У меня нет кода java-скрипта для этого Не может ли это быть css? только – Erez
Если вы меняете внешний вид статических блоков HTML, то это может быть только CSS. Но во-вторых, вы пытаетесь изменить статический контент (т. Е. Существование divs в DOM, текст или URL-адрес гиперссылки и т. Д.), Вы должны использовать Javascript (или серверный скрипт, но это намного сложнее). –