force div to spill outside of ul container on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover on list

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover on list

Description

force div to spill outside of ul container on hover

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit </title> 
  <style>
.list {<!--from   w w w .j a  va2s  . c o  m-->
   width:161px;
   border:2px solid Chartreuse;
   overflow:hidden;
}

.list-item::after {
   content:'';
}

.list-item:hover::after {
   background-color:yellow;
   content:'long tooltip text about the color';
   margin-left:6px;
   position:absolute;
   z-index:1000;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="list"> 
   <li class="list-item">Lorem</li> 
  </ul>  
 </body>
</html>

Related Tutorials