hover without moving the below content

257

June 10, 2017, at 5:43 PM

I want on hover to display some items without moving the below content. My code is the following:

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

and the css for hover:

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

I want to display values one and two, without moving the <span>three</span>

Answer 1

Set ul#try li ul to position: absolute. Absolute positioning removes the element from the layout flow, and prevents it from changing other elements positions.

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>