HTML CSS examples for CSS Widget:Menu Dropdown
CSS dropdown menu vertical
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #wrapper {<!--from w w w.j a v a 2s. c o m--> background-color:Chartreuse; } nav { height:31px; } nav ul { background-color:yellow; padding:0; list-style:none; position:relative; bottom:16px; display:block; } nav ul:after { content:""; clear:both; display:block; } nav ul li { float:left; position:relative; } nav ul li a { display:block; padding:6px 6px; color:blue; text-decoration:none; text-align:right; margin-right:16px; } nav ul ul { background:pink; padding:0; position:absolute; top:100%; } nav ul ul li { float:none; border-top:2px solid OrangeRed; border-bottom:2px solid grey; position:relative; } nav ul li:nth-child(4) ul { display:none; } nav ul li:nth-child(4):hover ul { display:block; color:BlueViolet; } </style> </head> <body> <div id="wrapper"> <h1>Lorem </h1> <nav> <ul> <li> <a href="flags.html#introduction">Lorem ipsum </a> </li> <li> <a href="flags.html#history">Lorem i</a> </li> <li> <a href="flags.html#national">Lorem ipsum do</a> </li> <li> <a href="flags.html#international">Lorem ipsum dolor sit amet, consect</a> <ul> <li> <a href="flags.html#letters">Lorem ipsum dolor sit ame</a> </li> <li> <a href="flags.html#numbers">Lorem ipsum dolor sit ame</a> </li> </ul> </li> </ul> </nav> </div> </body> </html>