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>

Rent Charter Buses Company
READ ALSO
How can I enlarge an input field in IONIC 2

How can I enlarge an input field in IONIC 2

I am tryin to figure out, how to enlarge an Input-Field so that it fills the whole page below the title

237
How to add different logo when i scroll down?

How to add different logo when i scroll down?

I have made a page which has a transperant header and a logo in white colorBut when i scroll down my logo isn't visible because of white body color

365
Want to fix html images to stick to one another in relative position [on hold]

Want to fix html images to stick to one another in relative position [on hold]

how to stick the two depicted images with the above two imagesI am using relative position for my responsive webpage

210
How to overflow 3 levels deep menu ul &gt; li &gt; ul &gt; li &gt; ul &gt; li

How to overflow 3 levels deep menu ul > li > ul > li > ul > li

I need to create a menu using a combination of ul > li > ul which scale horizontallyEach ul should have a max-height and to scroll if it overflows

286