HTML CSS examples for CSS Widget:Nav Bar
CSS Navigation with header
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @charset "UTF-8"; body {<!--from ww w .jav a 2 s .co m--> background-color:Chartreuse; margin-top:0; font-family:arial; font-size:13px; } div.main { width:1050px; margin:auto; } div.mainheader { background-color:yellow; border-bottom:2px solid blue; height:151px; padding-top:21px; padding-left:21px; } div.headercontact { width:201px; float:right; color:pink; } div.mainbody { text-align:center; background-color:OrangeRed; } .searchbox { background:grey url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat 5px 5px; padding:5px 5px 5px 23px; width:151px; height:19px; } #navigation { font-size:19px; } #navigation ul { margin:0; padding:0; } #navigation li { list-style:none; } ul.top-level li { float:left; width:175px; background-color:BlueViolet; } li.border { border-right:2px solid Chartreuse; } #navigation a { color:yellow; cursor:pointer; display:block; height:56px; line-height:56px; text-indent:11px; text-decoration:none; width:100%; } #navigation li.border:hover>a, #navigation ul.sub-level a:hover { text-decoration:none; color:blue; } #navigation li:hover { background:pink; position:relative; } ul.sub-level { display:none; } li:hover .sub-level { filter:alpha(opacity=61); -moz-opacity:0.7; opacity:0.7; display:block; } ul.sub-level li { border:none; float:left; } </style> </head> <body> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="main.css"> <div class="main"> <div class="mainheader"> Lorem ip <div class="headercontact"> Lorem ipsum <br>Lorem ipsum dol <br>Lorem ipsum dolor sit <br>Lorem ipsum dol <br> <br> <input type="text" class="searchbox" id="searchbox"> </div> </div> <div class="mainbody"> <div id="navigation" class="navigation"> <ul class="top-level"> <li class="border"> <a href="contact.html">Lore</a> </li> <li class="border"> <a href="contact.html">Lorem ipsum do</a> <ul class="sub-level"> <li> <a href="#">Lorem ipsum dol</a> </li> <li> <a href="#">Lorem ipsum dol</a> </li> </ul> </li> <li class="border"> <a href="contact.html">Lorem i</a> </li> <li class="border"> <a href="contact.html">Lorem ipsum</a> </li> <li class="border"> <a href="contact.html">Lorem</a> </li> <li> <a href="contact.html">Lorem i</a> </li> </ul> </div> </div> </div> </body> </html>