位置絶対絶対絶対

Question

要素を配置する振る舞いはabsoluteと変更されているようです。私は、

<div> // position relative 
<ul> // position absolute 
    ul:before // position absolute 
    <li> // background color on hover 
</ul> 
</div> 

、まだbefore擬似要素を持っている

は、ulに制限されています。 ulを超えては見えません。 positionがfixed

に変更された場合でも、これは私はあなたがbackground:linear-gradient(black,yellow,red)を追加する必要がありますので、メニュー全体の背景を持っていたいことを理解し、出力

div { 
 
    border: 4px solid #525454; 
 

 
    width: 14em; 
 
\t height: 1em; 
 
\t position: relative; 
 

 
} 
 

 
div ul { 
 
    
 
\t background-color:#fff; 
 
    position:absolute; 
 
    top:110%; 
 
    max-height: 10.68571429rem; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: calc(100% + 2px); 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #FFF; 
 
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15); 
 

 

 

 
} 
 
div > ul > li:hover{ 
 
    background-color:beige; 
 
} 
 
div > ul > li { 
 
    cursor: pointer; 
 
    display: block; 
 
     padding:5px 10px; 
 

 
} 
 
div ul::before { 
 
    content: ""; 
 
    position: absolute; 
 

 
    width: 50px; 
 
    height: 102px; 
 
    background: linear-gradient(black, yellow, red); 
 
    top: -21px; 
 
    left: 5px; 
 
    z-index:1; 
 
}

<div> 
 
<ul> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
</ul> 
 

 
</div>

Answer 1

です〜div ul

ので、CSSはその

div 
 
{ 
 
\t border:4px solid #525454; 
 
\t width:14em; 
 
\t height:1em; 
 
\t position:relative 
 
} 
 

 
div ul 
 
{ 
 
\t background-color:#fff; 
 
\t position:absolute; 
 
\t top:110%; 
 
\t max-height:10.68571429rem; 
 
\t overflow-x:hidden; 
 
\t overflow-y:auto; 
 
\t width:calc(100% + 2px); 
 
\t margin:0; 
 
\t padding:0; 
 
\t background:#FFF; 
 
\t box-shadow:0 2px 3px 0 rgba(34,36,38,.15); 
 
\t background:linear-gradient(black,yellow,red) 
 
} 
 

 
div > ul > li:hover 
 
{ 
 
\t background-color:#f5f5dc 
 
} 
 

 
div > ul > li 
 
{ 
 
\t cursor:pointer; 
 
\t display:block; 
 
\t padding:5px 10px 
 
}

<div> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
    </ul> 
 
</div>

のように変更すべきです