懸停而不移動下面的內容

Question

我希望懸停時顯示一些項目而不移動下面的內容。 我的代碼如下：

<ul id="try" > 
    <li> 
     <img class="flame" src="https://vignette4.wikia.nocookie.net/knightsanddragons/images/f/fa/Dragons-flame.png/revision/latest/scale-to-width-down/100?cb=20160727135656"/> 
     <ul> 
     <li class="one"><span>one </span></li> 
     <li class="two"><span>two </span></li> 
     </ul> 
    </li> 
</ul> 
<span>three</span> 

和CSS懸停：

ul#try li {display: inline-block;background: transparent;} 
ul#try li:hover {background: transparent;} 
ul#try li:hover ul {display: block;background: transparent;} 
ul#try li ul { 
    display: none; 
} 
ul#try li ul li { 
    display: block; 
    background: transparent; 
} 

我想顯示值一和二，在不移動<span>three</span>

Answer 1

設置ul#try li ul到position: absolute。絕對定位從佈局流程中移除元素，並防止其更改其他元素位置。

ul#try li { 
 
    display: inline-block; 
 
    position: relative; 
 
    background: transparent; 
 
} 
 

 
ul#try li:hover { 
 
    background: transparent; 
 
} 
 

 
ul#try li:hover ul { 
 
    display: block; 
 
    background: transparent; 
 
} 
 

 
ul#try li ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 

 
ul#try li ul li { 
 
    display: block; 
 
    background: transparent; 
 
}

<ul id="try"> 
 
    <li> 
 
    <img class="flame" src="https://vignette4.wikia.nocookie.net/knightsanddragons/images/f/fa/Dragons-flame.png/revision/latest/scale-to-width-down/100?cb=20160727135656" /> 
 
    <ul> 
 
     <li class="one"><span>one </span></li> 
 
     <li class="two"><span>two </span></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<span>three</span>