HTML CSS examples for CSS Widget:Nav Bar
Styling navigation through CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navi {<!-- w ww . j av a2 s . co m--> height:31px; background:Chartreuse; font-size:15px; color:yellow; text-transform:uppercase; } .logo { margin:0; padding:0; float:left; } .logo a { float:left; margin:3px 11px; width:37px; height:27px; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') left top no-repeat; text-indent:-10000px; } #primary-nav, #tools-nav { list-style:none; margin:0; padding:0; } #primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a { float:left; } #primary-nav a, #tools-nav a { color:blue; text-decoration:none; padding:0 11px; border-right:2px solid pink; line-height:31px; } #primary-nav li:first-child a, #tools-nav li:first-child a { border-left:2px solid OrangeRed; } #tools-nav { float:right; } #tools-nav .icon a { text-indent:-10000px; } </style> </head> <body> <div id="navi"> <h1 class="logo"> <a href="#">Lorem ipsum </a> </h1> <ul id="primary-nav"> <li> <a href="#">Lorem ipsum</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem</a> </li> </ul> <ul id="tools-nav"> <li class="login"> <a href="#">Lorem </a> </li> <li class="email icon"> <a href="#">Lorem</a> </li> <li class="twitter icon"> <a href="#">Lorem i</a> </li> <li class="search icon"> <a href="#">Lorem </a> </li> </ul> </div> </body> </html>