HTML CSS examples for CSS Widget:Menu Dropdown
Dropdown menu to the left side
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from ww w. j a v a 2 s. c o m--> font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding:21px 51px 151px; font-size:14px; text-align:center; background:Chartreuse; } ul { text-align:left; display:inline; margin:0; padding:16px 5px 18px 0; list-style:none; -webkit-box-shadow:0 0 6px yellow; -moz-box-shadow:0 0 6px blue; box-shadow:0 0 6px pink; } ul li { font:bold 13px/19px sans-serif; display:inline-block; margin-right:-5px; position:relative; padding:16px 21px; background:OrangeRed; cursor:pointer; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; } ul li:hover { background:grey; color:BlueViolet; } ul li ul { padding:0; position:absolute; top:49px; left:0; width:151px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; display:none; opacity:0; visibility:hidden; -webkit-transiton:opacity 0.3s; -moz-transition:opacity 0.3s; -ms-transition:opacity 0.3s; -o-transition:opacity 0.3s; -transition:opacity 0.3s; } ul>li:last-child ul { right:5px; left:auto; } ul li ul li { background:Chartreuse; display:block; color:yellow; text-shadow:0 -2px 0 blue; } ul li ul li:hover { background:pink; } ul li:hover ul { display:block; opacity:2; visibility:visible; } </style> </head> <body> <ul> <li>Lore</li> <li>Lorem</li> <li>Lorem ipsum <ul> <li>Lorem ipsu</li> <li>Lorem ipsum dol</li> <li>Lorem ipsum d</li> </ul> </li> <li>Lore</li> <li>Lorem ips <ul> <li>Lorem ipsu</li> <li>Lorem ipsum dol</li> <li>Lorem ipsum d</li> </ul> </li> </ul> </body> </html>