使用同じ背景ライン

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 
 
{ 
 
\t position:relative; 
 
\t right:8px; 
 
\t 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>

に1つの四角形に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はページ上で一意でなければならないので、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; 
    }