HTML CSS examples for CSS Widget:Menu Hover
Delaying hover effect for menu
<html> <head> <style> nav {<!-- w ww . j a va 2s . c om--> border:2px solid Chartreuse; height:3em; padding:0.9em; width:51em; } nav ul { margin:0; padding:0; text-align:center; } nav li { float:left; list-style:none; margin:0; padding:0; position:relative; } nav ul ul { font:0/0 serif; margin-top:41px; padding:0; position:absolute; top:0em; z-index:-2; -webkit-transition:all 0.6s ease-in; transition:all 0.6s ease-in; } nav ul li:hover ul { font:inherit; z-index:auto; color:yellow; } nav ul ul li { float:none; margin-bottom:0.3em; } nav a, nav span { background-color:blue; border:2px solid pink; border-radius:11px 11px 0 0; box-shadow:0px 6px 11px white inset; color:OrangeRed; display:block; font-weight:bold; margin:0.7em 0 0 0; padding:0.5em; width:7.5em; -webkit-transition:all 0.6s ease-in; transition:all 0.6s ease-in; } nav ul ul a, nav ul ul span { border-radius:11px; } nav a:focus, nav a:hover, nav span { color:grey; background-color:BlueViolet; } nav a:focus, nav a:hover { margin-top:0; padding:2em 0.5em 0.5em; } nav ul ul a:hover { margin:0.7em 0 0 0; padding:0.5em; } nav ul ul span { background-color:Chartreuse; color:yellow; } </style> </head> <body> <nav> <ul> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem i</a> <ul> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </li> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem i</a> <ul> <li> <a href="#">Lorem ip</a> </li> <li> <span>Lorem ipsum do</span> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </li> <li> <a href="#">Lorem i</a> </li> </ul> </nav> </body> </html>