HTML CSS examples for CSS Widget:Nav Bar
Navigation breadcrumb using css and html
<html> <head> <style> body<!--from w w w . j a va 2s. c om--> { margin:auto; } #one, #two, #three { position:relative; width:201px; height:41px; float:left; background-color:Chartreuse; cursor:pointer; border-top:2px solid yellow; border-bottom:2px solid blue; } #one { border-left:2px solid pink; } #one:after, #two:after, #three:after { position:absolute; width:0; height:0; border-top:21px solid OrangeRed; border-bottom:21px solid grey; border-left:11px solid BlueViolet; left:100%; top:0px; content:""; z-index:2; } #one:hover, #two:hover, #three:hover { background-color:Chartreuse; } #one:hover:after, #two:hover:after, #three:hover:after { border-left:11px solid yellow; } #circle, #text { float:left; } #circle { position:relative; background-color:blue; color:pink; border-radius:51%; width:22px; height:22px; left:16px; top:51%; margin-top:-13px; text-align:center; border:2px solid OrangeRed; } #text { position:relative; left:21px; top:51%; color:grey; margin-top:-12px; } #one:hover #circle, #two:hover #circle, #three:hover #circle { background-color:BlueViolet; color:Chartreuse; } #one:hover #text, #two:hover #text, #three:hover #text { color:yellow; } #navigation { padding:41px; position:absolute; text-align:center; background-color:blue; border-radius:11px; box-shadow:0px 0px 11px black; margin-left:11px; margin-top:11px; } </style> </head> <body> <div id="navigation"> <div id="one"> <div id="circle"> <b>L</b> </div> <div id="text"> Lorem ipsum dolor sit a </div> </div> <div id="two"> <div id="circle"> <b>L</b> </div> <div id="text"> Lorem ipsum dolo </div> </div> <div id="three"> <div id="circle"> <b>L</b> </div> <div id="text"> Lorem ipsum dolor </div> </div> </div> </body> </html>