HTML CSS examples for CSS Widget:Nav Bar Item
Horizontal Navbar item with border
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .Nav {<!-- w w w . ja v a 2 s . co m--> background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); border:2px solid Chartreuse; border-right:none; width:100%; margin-bottom:0px; } .Nav ul { margin:0; padding:0; } .Nav ul li { list-style:none; text-align:center; border-left:2px solid yellow; border-right:2px solid blue; } .Nav ul li:first-child { border-left:none; } .Nav ul li a { display:block; text-decoration:none; color:pink; padding:11px 0; } .Nav ul li a:hover { display:block; text-decoration:none; color:OrangeRed; padding:11px 0; } .Nav { display:table; table-layout:fixed; } #Ul { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction:row; } #Ul li { -webkit-box-flex:2; -moz-box-flex:2; width:21%; -webkit-flex:2; -ms-flex:2; flex:2; } @media (max-width: 330px) { #Ul { display:block; } .Nav { font-size:.9em; width:100%; } .Nav ul li { display:block; border-bottom:2px solid grey; } #Ul li { width:100%; } } </style> </head> <body> <div class="Nav"> <ul id="Ul"> <li> <a href="" target="new">Lorem ip</a> </li> <li> <a href="">Lorem ips</a> </li> <li> <a href="">Lorem ips</a> </li> <li> <a href="" target="new">Lore</a> </li> <li> <a href="">Lorem ipsum dol</a> </li> <li> <a href="" target="new">Lorem i</a> </li> </ul> </div> </body> </html>