HTML
- <div id="cssmenu_red">
- <ul>
- <li class="selected"><a href="#">Css Menu </a></li>
- <li><a href="#">Only Css Menu</a></li>
- <li><a href="#">CSS3.0 Menu</a></li>
- <li><a href="#">Web 2.0 Menu</a></li>
- <li><a href="#">Css Menu</a></li>
- </ul>
- </div>
CSS
- <style>
- #cssmenu_red {
- font-size : 0.8em;
- line-height : 1.6em;
- height : 38px;
- font-variant:normal;
- background:url(images/top_navigation_bottom.png) repeat-x bottom;
- overflow : visible;
- margin:10px 10px 10px 10px;
- -moz-border-radius-bottomleft :10px;
- -webkit-border-bottom-left-radius:10px;
- -moz-border-radius-bottomright:10px;
- -webkit-border-bottom-right-radius:10px;
- }
- #cssmenu_red ul {
- margin : 2px 8px 2px 0px;
- position : absolute;
- padding:0;
- list-style:none;
- z-index : 10;
- }
- #cssmenu_red a {
- color : Black;
- text-decoration : none;
- display : block;
- }
- #cssmenu_red ul li:first-child {
- padding:0 12px 4px 11px;
- }
- #cssmenu_red ul li {
- float : left;
- background:url(images/top_menu_bg.png) repeat-x bottom;
- margin-right : 11px;
- padding : 0 11px 4px 11px;
- -moz-border-radius-topleft :10px;
- -webkit-border-top-left-radius:10px;
- -moz-border-radius-topright:10px;
- -webkit-border-top-right-radius:10px;
- height : 21px;
- line-height:25px;
- overflow : visible;
- border:solid 1px #d7d7d7;
- border-width: 1px 1px 0 1px;
- }
- #cssmenu_red ul li.selected {
- background-image : url(images/top_menu_hover_bg.png);
- border-color:#cf0100;
- }
- #cssmenu_red ul li.selected a {
- color:#FFF;
- }
- #cssmenu_red ul li:hover {
- background-image : url(images/top_menu_hover_bg.png);
- overflow : visible;
- color:#FFFFFF;
- height : 21px;
- line-height:25px;
- border-color:#cf0100;
- }
- #cssmenu_red ul li:hover a {
- color:#FFFFFF;
- }
- </style>
Browser Compatability
- FireFox
- IE7
- Safari
- Opera
