以下のコンテンツを移動せずにホバー

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; 
} 

私はposition: absoluteに<span>three</span>

Answer 1

設定ul#try li ulを移動することなく、値1と2を表示したいです。絶対配置は、レイアウトフローから要素を削除し、他の要素の位置を変更しないようにします。

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>