HTML kód:

<div id='cssmenu'>

<ul>

   <li><a href='#'><span>Menü 1</span></a></li>

   <li><a href='#'><span>Menü 2</span></a></li>

   <li><a href='#'><span>Menü 3</span></a></li>

   <li class='last'><a href='#'><span>Menü 4</span></a></li>

</ul>

</div>

<style>

#cssmenu ul,

#cssmenu li,

#cssmenu span,

#cssmenu a {

  margin: 0;

  padding: 0;

}

#cssmenu a {

  display: inline-block;

  font-family: Calibri, Arial, sans-serif;

  color: #333;

  text-decoration: none;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -o-transition: all 0.2s;

  -ms-transition: all 0.2s;

  transition: all 0.2s;

}

#cssmenu a:hover {

  background: #95AA61;

}

#cssmenu ul {

  list-style: none;

  height: 34px;

  padding: 10px 0;

}

#cssmenu > ul > li {

  float: left;

  height: 34px;

  margin: 0 5px;

  position: relative;

}

#cssmenu > ul > li > a {

  background: #899752; /*a menü háttere*/

  border-radius: 17px;

  -moz-border-radius: 17px;

  -webkit-border-radius: 17px;

  line-height: 24px;

  padding: 5px 10px;

}

#cssmenu > ul > li.active a {

  background: #121310;

  color: #F6F8EE;

}

</style>