»
EnglishFrenchVietnamese

Print - Red-Black Menus - JavaScriptBank.com

Full version: jsB@nk » CSS » Horizontal menu » Red-Black Menus
URL: https://www.javascriptbank.com/red-black-menus.html

Red-Black Menus © JavaScriptBank.comThis two level JavaScript menu uses images for background.

Full version: jsB@nk » CSS » Horizontal menu » Red-Black Menus
URL: https://www.javascriptbank.com/red-black-menus.html



CSS
<style type="text/css">div.ormnav {width:100%; margin:0; padding:0; font-family:Verdana,sans-serif; font-size:11px; color:#222; }#nav, #subnav, #footer {width:100%; }#nav {background:#000 url(bg_nav.gif) repeat-x 0 0; margin:0; padding:0; }#nav ul, #subnav ul {list-style:none; margin:0; padding:0; overflow:auto; }#nav ul li {float:left; display:inline-table; list-style:none; padding: 0; margin: 0; }#nav ul li a {display:block; line-height:30px; padding:0 1em; text-decoration:none; font-size:12px; color:#fff; float:left; border-right:1px solid #000; margin:2px 0; }#nav ul li a {float:none; }#nav ul li a:hover {      background:#000 url(bg_nav_hover.gif) repeat-x 0 0; color:#bbb; }#nav .nav_selected a, #nav .nav_selected a:hover {line-height:34px; margin:0; background: #990000; background-image:none; }#subnav {background-color:#990000; padding:4px 0 4px 0; border-bottom:1px solid #990000; }#subnav ul li {float:left; display:inline-table; list-style:none; color: #FFF; }#subnav ul li a, #subnav p a {padding:0 1em; text-decoration:none; color:#fff; white-space: nowrap; }#subnav p a:hover {    text-decoration: underline; }#subnav .logintext {width: 180px; display: block; height: 1%; float: right; }#subnav .logintext p {padding: 0; font-size: 11px; }#subnav ul li + li a {border-left:1px solid #fff; }#subnav ul li a:hover {      text-decoration:underline; }#subnav .nav_selected a, #subnav .nav_selected a:hover {      color:#cc9999; }#subnav p {margin:0; padding:0 1em; color:#fff; white-space: nowrap; }</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div class="ormnav" id="nav"><ul><li><a href="http://www.javascriptbank.com/">Home</a></li><li class="nav_selected"><a href="http://www.javascriptbank.com/javascript/">JavaScript</a></li><li><a href="http://javascriptbank.com/4rum/">Forum</a></li><li><a href="http://www.javascriptbank.com/service/">Services</a></li><li><a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About</a></li></ul></div><div class="ormnav" id="subnav"><div class="logintext"><p><a href="http://javascriptbank.com/4rum/login.php" title="Login">Sign In</a></p>        </div>        <ul>        <li><a href="http://javascriptbank.com/javascript/">3D</a></li>        <li><a href="http://javascriptbank.com/javascript/">AJAX</a></li>        <li><a href="http://javascriptbank.com/javascript/">Menu</a></li>        </ul>        <div class="clear"></div>    </div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/css/Red_Black_Menus/bg_nav.gifhttp://javascriptbank.com/javascript/css/Red_Black_Menus/bg_nav_hover.gif