使用相同的背景线图像＆amp;列出项目

Question

如果您在代码段下方运行，则可以在this link

中看到如下图像

图像和列表项与背景线之间存在分离。我想删除它，并希望显示如下图像

我想要的是在单个矩形中包含图像和列表项

.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}


.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 23%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  background-color : #fff;
  
}
.grow:hover ul{
  display: block;
}

.grow ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  display: none;
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
  left: 0;
  right: 0;
}

.grow img{
  width: 100%;
}

.expand 
{
	position:relative;
	right:8px;
	top:4px;
}

<div class="grow">
  <img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" 
onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
  <ul>
    <li><a class="links1234" href="/cases-covers/apple-iphone-4.html">iPhone 4</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-4s.html">iPhone 4s</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5.html">iPhone 5</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5c.html">iPhone 5C</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5s.html">iPhone 5S</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-6.html">iPhone 6</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-6-plus.html">iPhone 6 Plus</a></li>
  </ul>
</div>

Jsfiddle：https://jsfiddle.net/ha9pscx9/1/

Answer 1

<强>被修改

检查JSFIddle：

将此添加到您的CSS中，以便在整个框弹出窗口上显示阴影：

.grow:hover:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 10px; /* Half of the original height */
  bottom: 5px;
  left:0;
  background-color: white;
  //box-shadow: 0 0px 0px 3px white;
  z-index: 2;
}

同时将.grow ul的以下参数更改为：

box-shadow: 0 0px 5px 1px rgba(0,0,0,.25);
margin-top: 0px;

检查JSFiddle代码（css）是否对您不起作用，如示例所示。

注意：您可能会注意到我引入了#limheight来重现这种情况。但是，如果你想将这个id用于更多的元素，你应该将它用作一个类而不是一个id，因为它应该在页面上是唯一的。

Answer 2

删除.grow ul

上的方框阴影

.grow ul {
    background: #fff none repeat scroll 0 0;
    /*box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);*/ /*Remove This*/
    display: block;
    left: 0;
    list-style: outside none none;
    margin: 0;
    padding: 5px;
    position: absolute;
    right: 0;
    z-index: 1;
}

Answer 3

这样做：

.links1234 {
       text-decoration: none;
   }

.grow li {
      padding: 10px;
      text-align: left;
  }