HTML
- <div class="round_h_menu">
- <div class="right_bg">
- <ul>
- <li><a href="#"><span>CSS Menu</span></a> </li>
- <li><a href="#"><span>Only For CSS Menu</span></a></li>
- <li><a href="#"><span>CSS Menu</span></a></li>
- <li class="noline"><a href="#"><span>CSS Menu Link</span></a></li>
- </ul>
- </div>
- </div>
CSS
- <style>
- div.round_h_menu {
- background:#737171 url(images/top-menu-leftbg.gif) no-repeat left top; font-family:Arial, Helvetica, sans-serif;
- height:34px;
- margin:0;
- padding:0;
- }
- div.round_h_menu div.right_bg {
- background:url(images/top_menu-right.gif) no-repeat right top;
- height:34px;
- margin:0;
- padding:0;
- text-align:left
- }
- div.round_h_menu ul {
- margin:0;
- padding:5px 0 5px 2px;
- list-style:none;
- }
- div.round_h_menu ul li {
- margin:0;
- padding:0 9px 0 7px;
- list-style:none;
- display:inline;
- float:left;
- background:url(images/menu-line.gif) no-repeat right;
- }
- div.round_h_menu ul li.noline {
- background:none;
- }
- div.round_h_menu ul li a {
- color:#ffffff;
- float:left;
- margin:0;
- padding:0 0 0 4px;
- font-size:12px;
- text-decoration:none;
- }
- div.round_h_menu ul li a span {
- color:#ffffff;
- padding:4px 30px 5px 26px;
- display:block;
- }
- div.round_h_menu ul li a:hover {
- background:url(images/top-menu-over-l.gif) no-repeat left top;
- }
- div.round_h_menu ul li a:hover span {
- background:url(images/top-menu-over-r.gif) no-repeat right top;
- }
- </style>
Browser Compatability
- FireFox
- IE7
- Safari
- Opera
