HTML CSS examples for CSS Widget:Hover to change
When hovering a CSS list item, change the parent items CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #nav-wrapper ul { position:relative; width:701px; float:right; margin:0; list-style-type:none; } #nav-wrapper ul li { vertical-align:middle;<!--from ww w . ja v a 2 s. co m--> display:inline; margin:0; color:Chartreuse; list-style-type:none; } #nav-wrapper li a { text-decoration:none; white-space:nowrap; line-height:46px; font-size:14px; color:yellow; padding:6px 16px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } #nav-wrapper ul li:hover>a { color:blue; background-color:pink; } #nav-wrapper ul ul { display:none; } #nav-wrapper ul li:hover ul { display:block; margin:-11px 0 0 0; padding:0px 21px 21px 21px; border-color:OrangeRed; border:2px; border-style:solid; background:grey; position:absolute; top:46px; right:321px; width:421px; } </style> </head> <body> <div id="nav-wrapper"> <ul> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem </a> </li> <li> <a href="">Lore</a> <ul> <li> <a href="">Lorem ipsu</a> </li> <li> <a href="">Lorem ipsu</a> </li> <li> <a href="">Lorem ipsu</a> </li> <li> <a href="">Lorem ipsu</a> </li> <li> <a href="">Lorem ipsu</a> </li> </ul> </li> </ul> </div> </body> </html>