HTML CSS examples for CSS Widget:Nav Bar
Navigation bar with horizontal sub bar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .center {<!-- w ww . j a v a 2 s . c o m--> text-align:center; } nav { width:501px; text-align:center; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; font-size:12px; letter-spacing:2px; } nav ul ul { display:none; } nav ul li:hover>ul { display:block; } nav ul { margin:0 auto 21px auto; padding:0 21px; border-radius:11px; list-style:none; position:relative; background:Chartreuse; } nav ul:after { content:" \2023 "; clear:both; display:block; } nav ul:last-child:after { content:""; } nav ul li { display:inline-block; } nav ul li a { text-align:center; display:block; padding:21px 16px; text-decoration:none; } nav ul ul { border-radius:0px; padding:0; position:absolute; top:100%; z-index:100; } nav ul ul li { float:none; position:relative; } nav ul ul li a { padding:16px 41px; border-top:2px solid yellow; border-bottom:2px solid blue; } nav ul ul ul { position:absolute; left:100%; top:0; } </style> </head> <body> <nav> <div class="center"> <ul> <li> <a href="/">Lore</a> </li> <li> <a href="{text:Nav Link 1}">Lorem </a> <ul> <li> <a href="">Lorem ipsum</a> </li> <li> <a href="">Lorem ipsum </a> </li> </ul> </li> <li> <a href="">Lorem </a> <ul> <li> <a href="">Lorem ip</a> </li> <li> <a href="">Lorem</a> </li> </ul> </li> <li> <a href="">Lorem </a> </li> <li> <a href="">Lorem </a> </li> </ul> </div> </nav> </body> </html>