HTML
- <div class="blue_h_menu">
- <ul>
- <li><a href="#">Only Css Menu</a> </li>
- <li><a href="#">CSS Menu</a></li>
- <li><a href="#">CSS3 Menu</a></li>
- <li class="noline"><a href="#">Web 2.0 CSS Menu</a></li>
- </ul>
- </div>
CSS
- <style>
- div.blue_h_menu {
- background: url(images/blue_menu_left.gif) no-repeat left top;
- height:30px;
- margin:0;
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- line-height:30px;
- font-weight:bold;
- padding:0 0 0 10px;
- border-bottom:solid 2px #FFF;
- }
- div.blue_h_menu ul {
- margin:0;
- background:url(images/blue_menu_right.gif) no-repeat right top;
- padding:0 0 0 10px;
- height:30px;
- list-style:none;
- }
- div.blue_h_menu ul li {
- margin:0;
- padding:0 2px 0 1px;
- list-style:none;
- background:url(images/blue_menu_v_line.gif) no-repeat right bottom;
- display:inline;
- float:left;
- }
- div.blue_h_menu ul li.noline {
- background:none;
- }
- div.blue_h_menu ul li a {
- color:#ffffff;
- float:left;
- margin:0;
- height:30px;
- padding:0 25px;
- font-size:12px;
- text-decoration:none;
- }
- div.blue_h_menu ul li a:hover {
- background:url(images/blue_menu_hover.gif) no-repeat center bottom;
- }</style>
Browser Compatability
- FireFox
- IE7
- Safari
- Opera
