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
