Vertical Blue and orange menu

Vertical Blue and orange menu

HTML

  • <div class="Blue_orange_menu">
  • <h2>Categories Name</h2>
  • <ul class="leftmenu">
  • <li><a href="#" title="Css menu"><span>Css Menu Link</span></a></li>
  • <li><a href="#" title="css horizontal menu"><span>Css Menu Link 1</span></a></li>
  • <li><a href="#" title="Css Menu Link"><span>Css Menu Link 2</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 3</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 4</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 5</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 6</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • div.Blue_orange_menu {
  • background:url(images/blue_v_menu_bottom.gif) no-repeat bottom;
  • width:216px;
  • padding-bottom:3px;
  • float:left;
  • }
  • div.Blue_orange_menu h2 {
  • background:url(images/blue_v_menu_header.gif) no-repeat left top;
  • height:32px;
  • line-height:32px;
  • font-weight:normal;
  • color:#FFFFFF;
  • font-size:14px;
  • margin:0;
  • padding:0 0 0 28px;
  • font-size:16px;
  • }
  • div.Blue_orange_menu ul {
  • margin:0px;
  • background:#FFF;
  • display:block;
  • float:left;
  • width:208px;
  • padding:1px 4px 1px 2px;
  • list-style:none; border:solid 1px #4599ef; border-width:0 1px;
  • }
  • div.Blue_orange_menu ul li {
  • margin:0;
  • padding:0;
  • list-style:none;
  • clear:both;
  • }
  • div.Blue_orange_menu ul li a {
  • background:#737171 url(images/blue_v_menu_a_left.gif) no-repeat left top;
  • color:#ffffff;
  • float:left;
  • margin:4px 2px 1px 2px;
  • padding:0;
  • font-size:12px;
  • text-decoration:none;
  • width:205px;
  • font: bold 12px Verdana, Arial, Helvetica, sans-serif
  • }
  • div.Blue_orange_menu ul li a span {
  • background:url(images/blue_v_menu_a_right.gif) no-repeat right top;
  • color:#ffffff;
  • padding:7px 0 7px 25px;
  • display:block;
  • margin:0 0 0 0;
  • }
  • div.Blue_orange_menu ul li a:hover {
  • background:#737171 url(images/blue_v_menu_a_left_o.gif) no-repeat left top;
  • }
  • div.Blue_orange_menu ul li a:hover span {
  • background:url(images/blue_v_menu_a_right_o.gif) no-repeat right top;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera