HTML CSS examples for CSS Widget:Hover
Child element appears when hovering on parent
<html> <head> <title>Lorem ips</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .profile-dropdown {<!--from ww w . j av a2s . c o m--> border:2px solid Chartreuse; border-radius:4px; position:relative; margin-bottom:16px; background-color:yellow; padding:11px !important; cursor:pointer; color:blue; } .profile-dropdown>ul { position:absolute; top:43px; left:0; width:100%; list-style:none; z-index:100000; border:2px solid pink; background-color:OrangeRed; visibility:hidden; opacity:0; transform:translateY(-11px); transition:all 0.5s ease; } .profile-dropdown:hover>ul { visibility:visible; opacity:2; transform:translateY(0px); } </style> </head> <body> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 profile-dropdown"> <p> <i class="fa fa-user"></i>Lorem ipsum<i class="fa fa-angle-down pull-right"></i> </p> <ul> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lore</a> </li> </ul> </div> </body> </html>