Demó:

Kód:

HTML:

<div id="cssmenu">

<ul>

<li>

<a href="URL cím helye" title="Menüd neve">menüd neve</a></li>

<li>

<a href="URL cím helye" title="Menüd neve">menüd neve</a></li>

<li>

<a href="URL cím helye" title="Menüd neve">menüd neve</a></li>

</ul>

</div>

 

<style type="text/css">

/* Let's import the lovely google font, please keep this line at the top of your stylesheet */

 

@import url(http://fonts.googleapis.com/css?family=Capriola);

 

 

 

/* Menu CSS */ 

 

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{

 

padding: 0;

margin: 0;

line-height: 1;

font-family: 'Capriola', sans-serif;

 

}

 

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

 

content: '';

display: table;

 

}

 

 

#cssmenu:after, #cssmenu > ul:after {

 

clear: both;

 

}

 

#cssmenu {

 

zoom:1;

height: 69px;

background: url('//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1346779898_96.png') repeat-x center bottom;

border-radius: 2px;

 

}

 

#cssmenu ul{

 

background: url('//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1346779897_97.png') repeat-x 0px 4px;

height: 69px;

 

}

 

#cssmenu ul li{

 

float: left;

list-style: none;

 

}

 

#cssmenu ul li a{

 

display: block;

height: 37px;

padding: 22px 30px 0;

margin: 4px 2px 0;

border-radius: 2px 2px 0 0;

text-decoration: none;

font-size: 15px;

color: white;

text-shadow: 0 1px 1px rgba(0, 0, 0, .75);

font-weight: 400;

opacity: .9;

 

}

 

#cssmenu ul li:first-child a{

 

margin: 4px 2px 0 0;

 

}

 

#cssmenu ul li a:hover, #cssmenu ul li.active a{

 

background: url('//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1346779897_50.png') center bottom;

display: block;

height: 37px;

margin-top: 0px;

padding-top: 26px;

color: #004f7c;

text-shadow: 0 1px 1px rgba(255, 255, 255, .55);

opacity: 1;

 

}

</style>