Помогите с меню!

[Sheremet]

Добрый день всем. Помогите сверстать эту менюшку... Теоретически понимаю как... А на практике не выходит.

Шрифты: Calibri Regular 17 px

Вот что уже сделал, но размеры не те..и вообще бред какой то вышел.

<div class="menu_1">

<ul class="menu_cont">

<li class="mc_li mc_li_first"><a href="#">Grammar</a></li>

<li class="mc_li mc_1"><a href="#">Reading</a></li>

<li class="mc_li mc_2"><a href="#">Listening</a></li>

<li class="mc_li mc_3"><a href="#">Writing</a></li>

<li class="mc_li mc_4"><a href="#">Speaking</a></li>

<li class="mc_li mc_5"><a href="#">Vocabulary</a></li>

<li class="mc_li mc_li_last"><a href="#">Fun</a></li>

</ul>

</div>

.menu_1{

float: left;

padding-top: 60px;

margin-left: -168px;

}

.menu_cont ul {

font-size: 16px;

list-style: none outside none;

margin: 0;

padding: 0px 0 0;

}

.menu_cont .mc_li_first a {

border-radius: 5px 0 0 5px;

}

.menu_cont .mc_li_last a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

border-radius: 0 5px 5px 0;

}

.menu_cont .mc_1 a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

}

.menu_cont .mc_2 a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

}

.menu_cont .mc_3 a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

}

.menu_cont .mc_4 a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

}

.menu_cont .mc_5 a {

background: url("images/line_g.png") no-repeat scroll 0 -5px transparent;

}

.menu_cont .mc_li {

display: inline;

float: left;

}

.menu_cont .mc_li a {

background: url("images/bg_1.png");

color: white;

display: block;

padding: 10px;

text-decoration: none;

}

Edited June 1, 2012 by Sheremet

[Modestes]

как то так, имейджи сам подставишь вместо цвета

[Sheremet]

как то так, имейджи сам подставишь вместо цвета

СПАСИБО!))))))