HTML CSS examples for CSS Widget:Menu Bar
Create tab menu bar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!--from w ww . ja v a 2 s . c o m--> list-style:outside none none; padding:0; margin:0; } li { display:inline-block; } a { background-color:Chartreuse; color:yellow; padding:21px; border-top-left-radius:6px; border-top-right-radius:6px; display:inline-block; text-decoration:none; box-shadow:2px 2px 4px blue; } .selected a { background-color:pink; } nav { position:relative; z-index:2; } div { position:relative; z-index:3; background-color:OrangeRed; height:21px; } </style> </head> <body> <nav> <ul> <li class="selected"> <a href="#">Lore</a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> </ul> </nav> <div class="divider"></div> </body> </html>