HTML CSS examples for CSS Widget:Menu Dropdown
Drop-down menu with transparent background
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- www.jav a 2s.c o m--> margin:0; padding:0; } .clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } header>hide:before { display:block; content:""; height:31px; width:31px; background:black url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat 0 0; background-size:contain; position:absolute; top:21px; left:0px; margin:0px; } header>nav { display:none; position:absolute; text-align:left; top:51px; left:0; width:201px; height:194px; background-color:Chartreuse; z-index:1000; } header>nav>ul { list-style-type:none; margin:0; padding:0; } header>nav>ul>li { position:relative; float:none; bottom:0; right:0; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat top right; background-size:contain; } header>nav>ul>li>a { font-size:2em; font-weight:bold; text-decoration:none; color:yellow; margin:0px 60px 0px 0px; display:inline-block; line-height:49px; padding:0px 25px; width:61%; white-space:nowrap; } header>nav>ul>li>a:hover { background-color:blue; } header>hide:hover + nav, header>nav:hover { display:block; } </style> </head> <body> <!-- Header --> <header class="clearfix"> <!-- Menu --> <hide></hide> <nav> <ul> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> </ul> </nav> </header> </body> </html>