Iam trying to get a nice CSS3 Menu working on my test website.
I've got it from here:
http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3...

I had to change the code a bit not to be in conflict with the original css file of the default theme added this line to the header.php:

<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('nav.css')?>" />

One button works but the other links are ordered vertically

NAV.CSS CONTENTS:
===================================
.wrapper {
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}

.title {
position: absolute;
right: 20px;
top: 10px;
font-size: 18px;
text-transform: uppercase;
}

.fl {
float: left;
}

.container {
width: 960px;
margin: 0 auto;
}

.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}

a.navigoes {
text-decoration: none;
color: #363636;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}

ul.menu {
margin: 0;
padding: 0;
}

ul.menu li.active {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul.menu li.active a.navigoes {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}

ul.menu li.active a.navigoes :hover {
background: transparent none;
}

ul.menu[rel=sam1] li.active a.navigoes {
background: #606060;
}

ul.menu[rel=sam1] li.active a.navigoes:hover {
background: transparent none;
}

ul.menu li.active a.navigoes {
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
===============================================
HTML CODE FOR THE NAVIGATION:
<div class="wrapper">
<div class="container">
<ul class="menu" rel="sam1">
<li class="active"><a href="http://insicdesigns.com" class="navigoes">Home</a></li>
<li><a href="http://insicdesigns.com" class="navigoes">About</a></li>
<li ><a href="http://insicdesigns.com" class="navigoes">Blog</a></li>
<li><a href="http://insicdesigns.com" class="navigoes">Services</a></li>
<li><a href="http://insicdesigns.com" class="navigoes">Portfolio</a></li>
<li><a href="http://insicdesigns.com" class="navigoes">Contacts</a></li>
</ul>
</div>
<p class="title">CSS3 Experiment by INSIC</p>
</div>