响应div作为下拉列表

Question

我正在尝试将div作为下拉列表，我正在尝试使其响应但现在没有成功。我正在尝试使其坚持类别容器。

the demo is here    http://jsfiddle.net/yppw2cjt/1/

我试图让它看起来像这样的图像：

http://s15.postimg.org/80b238nff/categoriesexample.png

我试图让它不显示，当悬停在类别显示块上但由于某种原因它没有工作

任何人都有任何想法？

谢谢

Answer 1

    $(document).ready(function(){
        $(".dropdownlist").mouseover(function() {
            $("#category-list").show();
        }).mouseout(function() {
             $("#category-list").hide();
        });    
    });

试试这个。为下拉图片添加类。

Answer 2

我希望我会帮助你，你可以根据自己的需要改变CSS。

	.clearfix:after{content: '';clear: both;display: block;}
	.clr{clear: both;}
	#seraching-container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#search-input{
    width: 100%;
    /*margin: 2% 1%;*/
    /*margin: 0 1%;*/

    font-weight: 700;
    float: left;
}
#category-list{
  width: 90%;
  border: 1px solid darkgray;
  background: #e2e2e2;
  position: absolute;
  opacity: 0.90;
  top: 23px;
  z-index: 10; /*because its absolute*/
  left: 0;
  margin: 0 1%;
}
a.category-item {
  float: left;
  width: 26%;
  margin: auto 2%;
  line-height: 0.5;
  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: 90%;
  /*margin: 2% 1%;*/
  margin: 0 1%;
  height: 100%;
  background-color: #fff;
  border: 1px solid darkgray;
  float: left;
  position: relative;
  /*overflow: hidden;*/
}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: 6%;
    float: left;
    margin: 0 0 0 1%;
}

.searchWrap , .dropdown_warp{position: relative;float: left;width: 48%;margin: 1%;}
@media screen and (max-width: 600px) {
	.searchWrap , .dropdown_warp{width:100%;}
}

<div id="searching-c" class="clearfix">
<div class="searchWrap">
	<input id="search-input" type="text" name="search_field" value="" placeholder="search">
</div>
	
	<div class="dropdown_warp">
		<div id="categories-ctainer" name="categories">
			<p>Categories</p>
			<img src="../images/arrowdown.png" alt="">
		</div>
		<button type="submit" id="button-search" value="send">S</button>  
		<div class="clr"></div>
	<div id="category-list">
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>
	<a class="category-item"><p> Food</p></a>	
</div>
	</div>
</div>

Answer 3

您有#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上徘徊，所以它不会消​​失在你身上。< / p>

希望这有帮助！