OnlyCssMenu.com » Horizontal Menu http://www.onlycssmenu.com The best example of CSS base menu Wed, 17 Feb 2010 17:02:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Horizontal Yellow Ford CSS Menu http://www.onlycssmenu.com/horizontal-yellow-ford-css-menu.html http://www.onlycssmenu.com/horizontal-yellow-ford-css-menu.html#comments Sun, 06 Dec 2009 13:53:26 +0000 admin http://www.onlycssmenu.com/?p=462 horizontal-3d-red-round-cssmenu-08

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3d-red-round-cssmenu-08

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#530316;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-yellow-ford-css-menu.html/feed 0 Horizontal Red 3D Round CSS Menu http://www.onlycssmenu.com/horizontal-red-3d-round-css-menu.html http://www.onlycssmenu.com/horizontal-red-3d-round-css-menu.html#comments Sun, 06 Dec 2009 13:26:59 +0000 admin http://www.onlycssmenu.com/?p=457 horizontal-3d-red-round-cssmenu-07

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3d-red-round-cssmenu-07

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#530316;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-red-3d-round-css-menu.html/feed 0 Horizontal Purple 3D Round CSS Menu http://www.onlycssmenu.com/horizontal-purple-3d-round-css-menu.html http://www.onlycssmenu.com/horizontal-purple-3d-round-css-menu.html#comments Sun, 06 Dec 2009 13:23:01 +0000 admin http://www.onlycssmenu.com/?p=452 horizontal-3D-purple-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3D-purple-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#6d30a9;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-purple-3d-round-css-menu.html/feed 1 Horizontal Pink 3D Round CSS Menu http://www.onlycssmenu.com/horizontal-pink-3d-round-css-menu.html http://www.onlycssmenu.com/horizontal-pink-3d-round-css-menu.html#comments Sun, 06 Dec 2009 13:19:18 +0000 admin http://www.onlycssmenu.com/?p=447 horizontal-3d-Pink-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3d-Pink-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#80095f;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-pink-3d-round-css-menu.html/feed 0 Horizontal Orange 3Dround CSS Menu http://www.onlycssmenu.com/horizontal-orange-3dround-cssmenu.html http://www.onlycssmenu.com/horizontal-orange-3dround-cssmenu.html#comments Sun, 06 Dec 2009 13:14:55 +0000 admin http://www.onlycssmenu.com/?p=442 horizontal-3d-orange-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3d-orange-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#884d00;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#422704;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-orange-3dround-cssmenu.html/feed 0 Horizontal Green 3DRound CSS Menu http://www.onlycssmenu.com/horizontal-green-3dround-css-menu.html http://www.onlycssmenu.com/horizontal-green-3dround-css-menu.html#comments Sun, 06 Dec 2009 13:09:26 +0000 admin http://www.onlycssmenu.com/?p=437 horizontal-3D-Green-Round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only

…

]]> horizontal-3D-Green-Round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#2e6307;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#418111;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-green-3dround-css-menu.html/feed 0 Horizontal Blue 3DRound Css Menu http://www.onlycssmenu.com/horizontal-blue-3dround-css-menu.html http://www.onlycssmenu.com/horizontal-blue-3dround-css-menu.html#comments Sun, 06 Dec 2009 13:00:52 +0000 admin http://www.onlycssmenu.com/?p=430 horizontal-3dBlue-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a

…

]]> horizontal-3dBlue-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#165aa2;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-blue-3dround-css-menu.html/feed 0 Horizontal Red2 3DRound CSS Menu http://www.onlycssmenu.com/horizontal-3dred2-round-cssmenu.html http://www.onlycssmenu.com/horizontal-3dred2-round-cssmenu.html#comments Sun, 06 Dec 2009 12:53:02 +0000 admin http://www.onlycssmenu.com/?p=411 horizontal-3d-red-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only

…

]]> horizontal-3d-red-round-cssmenu

HTML

  • <div class="onlycssmenu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li class="nopipe"><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .onlycssmenu, .onlycssmenu ul, .onlycssmenu ul li a, .onlycssmenu ul li span {
  • background-image:url(images/menu_stip.png);
  • background-repeat:no-repeat;
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu {
  • height:41px;
  • line-height:41px;
  • background-position:-1005px 0px;
  • padding-left:10px
  • }
  • .onlycssmenu ul {
  • background-position: right -45px;
  • height:41px;
  • line-height:41px;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .onlycssmenu ul li {
  • display:inline;
  • float:left;
  • padding:6px 6px 0 5px;
  • background:url(images/menu_div.png) no-repeat right 11px;
  • }
  • .onlycssmenu ul li.nopipe {
  • background:none;
  • }
  • .onlycssmenu ul li a {
  • float:left;
  • padding-left:15px;
  • color:#FFFFFF;
  • text-decoration:none;
  • }
  • .onlycssmenu ul li a span {
  • float:left;
  • padding-right:15px;
  • height:30px;
  • line-height:30px;
  • }
  • .onlycssmenu ul li a:hover, .onlycssmenu ul li a.active {
  • background-position: -1005px -90px;
  • color:#b90b00;
  • }
  • .onlycssmenu ul li a:hover span, .onlycssmenu ul li a.active span {
  • background-position:right bottom;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/horizontal-3dred2-round-cssmenu.html/feed 0 V Bule Style Menu http://www.onlycssmenu.com/v-bule-style-menu.html http://www.onlycssmenu.com/v-bule-style-menu.html#comments Sun, 16 Aug 2009 03:31:54 +0000 admin http://www.onlycssmenu.com/?p=144 Blue Hover Menu

HTML

  • <div class="Bule_style_menu clearfix">
  • <ul class="clearfix">

…

]]> Blue Hover Menu

HTML

  • <div class="Bule_style_menu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .Bule_style_menu {
  • background:url(images/top_menu_left.gif) no-repeat left top;
  • padding-left:5px;
  • }
  • .Bule_style_menu ul {
  • background:url(images/top_menu_right.gif) no-repeat right top;
  • display:block;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .Bule_style_menu ul li {
  • display:inline;
  • float:left;
  • padding:4px 2px 4px 3px;
  • background:url(images/menu_sp.gif) no-repeat left 16px;
  • }
  • .Bule_style_menu ul li.first {
  • background-image:none;
  • }
  • .Bule_style_menu ul li a {
  • display:inline;
  • padding:0 0 0 5px;
  • float:left;
  • color:#FFFFFF;
  • text-decoration:none;
  • cursor:pointer
  • }
  • .Bule_style_menu ul li a span {
  • display:inline;
  • padding:0px 17px 0px 12px;
  • float:left;
  • height:36px;
  • line-height:36px;
  • color:#FFFFFF;
  • }
  • .Bule_style_menu ul li a:hover, .Bule_style_menu ul li a.active {
  • text-decoration:none;
  • background:url(images/top_nav_a_left.gif) no-repeat left top;
  • color:#020202;
  • }
  • .Bule_style_menu ul li a:hover span, .Bule_style_menu ul li a.active span {
  • background:url(images/top_nav_a_right.gif) no-repeat right top;
  • color:#020202;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/v-bule-style-menu.html/feed 0 CSS3.0 Red Tab Menu http://www.onlycssmenu.com/css3-0-red-tab-menu.html http://www.onlycssmenu.com/css3-0-red-tab-menu.html#comments Sun, 02 Aug 2009 10:47:04 +0000 admin http://www.onlycssmenu.com/css3-0-red-tab-menu.html css30tabmenu

HTML

  • <div id="cssmenu_red">
  • <ul>
  • <li class="selected"><a href="#">Css Menu </a></li>
  • <li><a

…

]]> css30tabmenu

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
]]> http://www.onlycssmenu.com/css3-0-red-tab-menu.html/feed 0