HTML CSS examples for CSS Widget:Menu Dropdown
CSS drop down menu sub-items
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w .j a v a2s .c o m--> text-align:center; } a { font-size:151%; text-decoration:none; color:Chartreuse; font-weight:bold; vertical-align:middle; } a:hover { background-color:yellow; } ul { padding:0; margin:0; } ul#nav_container { background-color:blue; list-style-type:none; text-align:center; } ul#nav_container li { display:inline-block; padding-left:6px; padding-right:6px; vertical-align:middle; position:relative; } .sub_menu { position:absolute; } .sub_menu li a { display:none; } #angajari ul.sub_menu li { float:left; } #angajari ul.sub_menu li a { top:0; white-space:nowrap; height:auto; } #angajari:hover ul.sub_menu li a { display:block; } </style> </head> <body> <div id="main_content"> <ul id="nav_container"> <li> <img id="logo" src="https://www.java2s.com/style/demo/Opera.png" style="width:150px;height:75px"> </li> <li> <a href="Main.html">Lorem </a> </li> <li> <a href="Page1.html">Lorem ip</a> </li> <li> <a href="Page2.html">Lorem ip</a> </li> <li> <a href="Page3.html">Lorem ip</a> </li> <li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Lorem ipsu</a> <ul class="sub_menu"> <li> <a href="Page41.html">Lorem i</a> </li> <li> <a href="Page42.html">Lorem </a> </li> </ul> </li> </ul> </div> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor si</p> </body> </html>