menu01

CSS Code

ul.horNav{
  list-style:none;
  margin:0px;
  padding:0px;
  }

ul.horNav li{
  display:inline;
  float:left;
  text-align:center;
  padding:0 0 0 10px; /* Padding Left */
  margin:0 2px 0 0;
  background:url(images/MENU_03.png) 0 0 no-repeat;
  }

ul.horNav li a{
  color:#333333;
  font-family:arial;
  font-size:11px;
  line-height:15px;
  text-decoration:none;
  display:block;
  height:37px;
  line-height:37px;
  padding:0 10px;
  float:left;
  padding:0 10px 0 0; /* Right Padding */
  text-align:center;
  display:inline;
  background:url(images/MENU_04.png) 100% 0 no-repeat;
}

ul.horNav li a:hover{
	color:#666666;
}

ul.horNav li.active{
	background:url(images/MENU_01.png) 0 0 no-repeat;
}

ul.horNav li.active a{
	background:url(images/MENU_02.png) 100% 0 no-repeat;
}

ul.horNav li.active a span{
	background:url(images/arrow.png) 50% 100% no-repeat;
 padding:0px 10px 17px 10px; /* space for block  */
 text-align:center;
 margin:0 auto;
 position:relative;
}

HTML

<ul class="horNav">
    <li class="active"><a href="#"><span>Consectetur</span></a>	</li>
    <li><a href="#"><span>Euismod ipsum</span></a></li>
    <li><a href="#"><span>Duis elit</span></a></li>
</ul>

DownloadImages from below

Advertisements