HTML CSS examples for CSS Widget:Menu Dropdown
Adding drop menu on tab in CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww .j av a 2 s . c o m--> font-size:81%; } ul#tabs { list-style-type:none; margin:31px 0 0 0; padding:0 0 0.4em 0; } ul#tabs li { float:left; } ul#tabs li a { color:Chartreuse; background-color:yellow; border:2px solid blue; border-bottom:none; padding:0.4em; text-decoration:none; } ul#tabs li a:hover { background-color:pink; } ul#tabs li a.selected { color:WhiteSmoke; background-color:OrangeRed; font-weight:bold; padding:0.8em 0.4em 0.39em 0.4em; } div.tabContent { border:2px solid grey; padding:0.6em; background-color:BlueViolet; } ul#tabs li ul { display:none; } ul#tabs li:hover ul { display:block; position:absolute; z-index:2; top:66px; } ul#tabs li:hover ul li { float:none; margin-bottom:21px; } </style> </head> <body> <ul id="tabs"> <li> <a href="#about">About JavaScript tabs</a> </li> <li> <a href="#advantages">Advantages of tabs</a> </li> <li> <a href="#">Using tabs</a> <ul> <li> <a href="#usage">Sub-Item #7</a> </li> <li> <a href="#">Sub-Item #7</a> </li> </ul> </li> </ul> </body> </html>