OnlyCssMenu.com » css 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 Pagination Round Yellow Menu http://www.onlycssmenu.com/pagination-round-yellow-menu.html http://www.onlycssmenu.com/pagination-round-yellow-menu.html#comments Sat, 02 Jan 2010 11:04:09 +0000 admin http://www.onlycssmenu.com/?p=551

« 1 2 3 4 5

« 1 2 3 4 5 6 7 8 9 10 …50 80 »

HTML

  • <div class=“onlycssmenu-paging clearfix”>
  • <span>« </span>
  • <span class=“active”>1</span>
  • <a href=“#” title=“Go to page 2″>2</a>
  • <a href=“#” title=“Go to page 3″>3</a>
  • <a href=“#” title=“Go to page 4″>4</a>
  • <a href=“#” title=“Go to page 5″>5</a>
  • <a href=“#” title=“Go to page 6″>6</a>
  • <a href=“#” title=“Go to page 7″>7</a>
  • <a href=“#” title=“Go to page 8″>8</a>
  • <a href=“#” title=“Go to page 9″>9</a>
  • <a href=“#” title=“Go to page 10″>10</a>
  • <span>…</span><a href=“#” title=“Go to page 50″>230</a>
  • <a href=“#” title=“Go to page 231″>80</a>
  • <a href=“#” title=“Go to Next Page”>»</a>
  • </div>

CSS

  • .onlycssmenu-paging, .onlycssmenu-paging a, .onlycssmenu-paging span {
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu-paging {
  • height:20px;
  • line-height:20px;
  • margin:0;
  • padding:0;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • background:url(images/paging_menu_bg.gif) no-repeat left top;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • float:left;
  • padding:0;
  • margin:0 2px;
  • color:#75653f;
  • width:24px;
  • height:25px;
  • text-align:center;
  • vertical-align:middle;
  • line-height:25px;
  • text-decoration:none;
  • }
  • .onlycssmenu-paging a{
  • background-position:0 0px;
  • }
  • .onlycssmenu-paging span {
  • background-position:0 -30px;
  • color:#75653f;
  • }
  • .onlycssmenu-paging a:hover, .onlycssmenu-paging .active {
  • background-position:0 -30px;
  • color:#75653f;
  • }

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/pagination-round-yellow-menu.html/feed 0 Pagination Round white Menu http://www.onlycssmenu.com/pagination-round-white-menu.html http://www.onlycssmenu.com/pagination-round-white-menu.html#comments Sat, 02 Jan 2010 10:56:23 +0000 admin http://www.onlycssmenu.com/?p=545

« 1 2 3 4 5

« 1 2 3 4 5 6 7 8 9 10 …50 80 »

HTML

  • <div class=“onlycssmenu-paging clearfix”>
  • <span>« </span>
  • <span class=“active”>1</span>
  • <a href=“#” title=“Go to page 2″>2</a>
  • <a href=“#” title=“Go to page 3″>3</a>
  • <a href=“#” title=“Go to page 4″>4</a>
  • <a href=“#” title=“Go to page 5″>5</a>
  • <a href=“#” title=“Go to page 6″>6</a>
  • <a href=“#” title=“Go to page 7″>7</a>
  • <a href=“#” title=“Go to page 8″>8</a>
  • <a href=“#” title=“Go to page 9″>9</a>
  • <a href=“#” title=“Go to page 10″>10</a>
  • <span>…</span><a href=“#” title=“Go to page 50″>230</a>
  • <a href=“#” title=“Go to page 231″>80</a>
  • <a href=“#” title=“Go to Next Page”>»</a>
  • </div>

CSS

  • .onlycssmenu-paging, .onlycssmenu-paging a, .onlycssmenu-paging span {
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu-paging {
  • height:20px;
  • line-height:20px;
  • margin:0;
  • padding:0;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • background:url(images/paging_menu_bg.gif) no-repeat left top;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • float:left;
  • padding:0;
  • margin:0 2px;
  • color:#51626f;
  • width:24px;
  • height:25px;
  • text-align:center;
  • vertical-align:middle;
  • line-height:25px;
  • text-decoration:none;
  • }
  • .onlycssmenu-paging a{
  • background-position:0 0px;
  • }
  • .onlycssmenu-paging span {
  • background-position:0 -30px;
  • color:#51626f;
  • }
  • .onlycssmenu-paging a:hover, .onlycssmenu-paging .active {
  • background-position:0 -30px;
  • color:#626262;
  • }

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/pagination-round-white-menu.html/feed 0 Pagination Light Yellow Rectangle Menu http://www.onlycssmenu.com/pagination-light-yellow-rectangle-menu.html http://www.onlycssmenu.com/pagination-light-yellow-rectangle-menu.html#comments Sat, 02 Jan 2010 10:06:42 +0000 admin http://www.onlycssmenu.com/?p=525

« Previous 1 2 3 4 5

« Previous 1 2 3 4 5 6 7 8 9 10 …230 231 Next »

HTML

  • <div class=“onlycssmenu-paging clearfix”>
  • <span>« Previous</span>
  • <span class=“active”>1</span>
  • <a href=“#” title=“Go to page 2″>2</a>
  • <a href=“#” title=“Go to page 3″>3</a>
  • <a href=“#” title=“Go to page 4″>4</a>
  • <a href=“#” title=“Go to page 5″>5</a>
  • <a href=“#” title=“Go to page 6″>6</a>
  • <a href=“#” title=“Go to page 7″>7</a>
  • <a href=“#” title=“Go to page 8″>8</a>
  • <a href=“#” title=“Go to page 9″>9</a>
  • <a href=“#” title=“Go to page 10″>10</a>
  • <span>…</span><a href=“#” title=“Go to page 230″>230</a>
  • <a href=“#” title=“Go to page 231″>231</a>
  • <a href=“#” title=“Go to Next Page”>Next »</a>
  • </div>

CSS

  • .onlycssmenu-paging, .onlycssmenu-paging a, .onlycssmenu-paging span {
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu-paging {
  • height:20px;
  • line-height:20px;
  • margin:0;
  • padding:0;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • background:#FFFFFF;
  • float:left;
  • padding:0 5px;
  • margin:0 1px;
  • border:solid 1px #d3d0c9;
  • color:#38401f;
  • text-decoration:none;
  • }
  • .onlycssmenu-paging span {
  • background:#d9dac8;
  • color:#626262;
  • }
  • .onlycssmenu-paging a:hover, .onlycssmenu-paging .active {
  • background:#d9dac8;
  • color:#626262;
  • }

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/pagination-light-yellow-rectangle-menu.html/feed 0 Pagination Rectangle Menu http://www.onlycssmenu.com/pagination-rectangle-menu.html http://www.onlycssmenu.com/pagination-rectangle-menu.html#comments Sat, 02 Jan 2010 09:50:23 +0000 admin http://www.onlycssmenu.com/?p=499

« Previous 1 2 3 4 5

…

]]>

« Previous 1 2 3 4 5 6 7 8 9 10 …230 231 Next »

HTML

  • <div class=“onlycssmenu-paging clearfix”>
  • <span>« Previous</span>
  • <span class=“active”>1</span>
  • <a href=“#” title=“Go to page 2″>2</a>
  • <a href=“#” title=“Go to page 3″>3</a>
  • <a href=“#” title=“Go to page 4″>4</a>
  • <a href=“#” title=“Go to page 5″>5</a>
  • <a href=“#” title=“Go to page 6″>6</a>
  • <a href=“#” title=“Go to page 7″>7</a>
  • <a href=“#” title=“Go to page 8″>8</a>
  • <a href=“#” title=“Go to page 9″>9</a>
  • <a href=“#” title=“Go to page 10″>10</a>
  • <span>…</span><a href=“#” title=“Go to page 230″>230</a>
  • <a href=“#” title=“Go to page 231″>231</a>
  • <a href=“#” title=“Go to Next Page”>Next »</a>
  • </div>

CSS

  • .onlycssmenu-paging, .onlycssmenu-paging a, .onlycssmenu-paging span {
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu-paging {
  • height:20px;
  • line-height:20px;
  • margin:0;
  • padding:0;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • background:#edefea;
  • float:left;
  • padding:0 5px;
  • margin:0 1px;
  • border:solid 1px #d3d0c9;
  • color:#373f1e;
  • text-decoration:none;
  • }
  • .onlycssmenu-paging span {
  • background:#FFFFFF;
  • color:#636363;
  • }
  • .onlycssmenu-paging a:hover, .onlycssmenu-paging .active {
  • background:#FFFFFF;
  • color:#636363;
  • }

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/pagination-rectangle-menu.html/feed 0 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