HTML CSS examples for CSS Widget:Nav Bar
make tabbed navigation fluid
<!doctype html> <html lang="en"> <head> <title>Lorem ip</title> <style type="text/css"> #second-menu-navi { width:1107px; margin:0 auto; z-index:25;<!-- ww w . j a v a2 s. c o m--> text-align:center; } #second-menu-navi a { display:inline-block; padding:13px 31px; vertical-align:middle; font-family:'aleobold', 'soniano_sans_unicoderegular'; font-size:17px; font-weight:normal; color:Chartreuse; text-decoration:none; background:yellow; background:blue; margin:0 4px 6px 0 !important; border-radius:0 0 5px 5px; outline:none; } #tab-1:active, #tab-1:hover { background-color:pink; } #tab-2:active, #tab-2:hover { background-color:OrangeRed; } #tab-3:active, #tab-3:hover { background-color:grey; } #tab-4:active, #tab-4:hover { background-color:BlueViolet; } #tab-5:active, #tab-5:hover { background-color:Chartreuse; } #tab-6:active, #tab-6:hover { background-color:yellow; } #tab-7:active, #tab-7:hover { background-color:blue; } #break-line-2 { width:100%; height:8px; border-top:2px solid pink; background-color:OrangeRed; position:fixed; top:63px; z-index:24; } @media only screen and (max-width:1024px) { #second-menu-navi { width:100%; } } </style> </head> <body> <div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;"> <div id="second-menu-navi" class="navi"> <a title="" href="why_choose_us.aspx" id="tab-1">Lorem ipsum d</a> <a title="" href="physicians.aspx" id="tab-2">Lorem ipsu</a> <a title="" href="medical_specialties.aspx" id="tab-3">Lorem ipsum dolor s</a> <a title="" href="locations.aspx" id="tab-4">Lorem ips</a> <a title="" href="urgent_care.aspx" id="tab-5">Lorem ipsum</a> <a title="" href="radiology.aspx" id="tab-6">Lorem ips</a> <a title="" href="lab.aspx" id="tab-7">Lor</a> </div> </div> </body> </html>