HTML CSS examples for CSS Widget:Menu Bar
Create menu bar with round corner
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> nav {<!-- ww w .j av a 2 s. com--> width:521px; background:Chartreuse; -webkit-border-radius:21px; -moz-border-radius:21px; border-radius:21px; } nav ul { list-style:none; margin:0; padding:6px 0; } nav li { display:inline; padding:13px; } nav a { font-family:Arial, Helvetica, Verdana, sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; color:yellow; display:inline-block; position:relative; } nav a:hover { color:blue; } nav a:after { content:""; width:11px; height:11px; background:pink; -moz-border-radius:51px; -webkit-border-radius:51px; border-radius:51px; position:absolute; top:3px; right:-16px; } nav li:last-child a:after { display:none; } </style> </head> <body> <nav role="navigation"> <ul> <li> <a href="#">Lorem ipsum dolor </a> </li> <li> <a href="#">Lorem ipsum dolor si</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#" id="last">Lorem i</a> </li> </ul> </nav> </body> </html>