CSS: Tabbed Menu

August 30, 2022

Free Code. This comes directly from this site http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtmlCreates rounded menus.You will need the following four images:

  • - Right Tab
  • Left Tab
  • Right Tab Hover
  • Left Tab Hover
  • Code<html><style>  #navigation a  {  color: #000;  background: #ffa20c url(left-tab.gif) left top no-repeat;  text-decoration: none;  padding-left: 10px  }  #navigation a span  {  background: url(right-tab.gif) right top no-repeat;  padding-right: 10px  }  #navigation a, #navigation a span  {  display: block;  float: left  }  /* Hide from IE5-Mac \*/  #navigation a, #navigation a span  {  float: none  }  /* End hide */  #navigation a:hover  {  color: #fff;  background: #781351 url(left-tab-hover.gif) left top no-repeat;  padding-left: 10px  }  #navigation a:hover span  {  background: url(right-tab-hover.gif) right top no-repeat;  padding-right: 10px  }  #navigation ul  {  list-style: none;  padding: 0;  margin: 0  }  #navigation li  {  list-style: none;  float: left;  margin: 0;  }</style><body><h1>Tabbed Menu Test</h1><ul id="navigation"><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Services</span></a></li><li><a href="#"><span>Take a tour</span></a></li><li><a href="#"><span>About us</span></a></li><li><a href="#"><span>Contact us</span></a></li></ul></body></html>

    Grow your business.
    I am focused on helping start-ups in stabilizing and growing through strategy and analysis. Reach out to me today to start growing your business.
    Start Now