html - 响应式 div 作为下拉列表

Question

我正在尝试将 div 设置为下拉列表，并且我正在尝试使其具有响应性但目前没有成功。我正在尝试使其坚持类别容器。

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

我试图让它看起来像这张图片:

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

我试图让它不显示，当鼠标悬停在类别显示 block 上时，但由于某种原因它不起作用

有人知道吗？

谢谢

Answer 1

希望我能帮到你，你可以根据需要更改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>