Working with CSS3 Menu - html

Question

I am presently doing a project with menus and trying to implement something which is the same menu appeared below:
And now I have got which is similar to this menu and trying to modify it but I am stucked with it.
Here is the screenshot of my menu how it looks in chrome:
And this is how it looks in IE8 and firefox:
The problem is I am able to get rounded corners but the gloss and the bump over the menu which is shown in 1st menu is not appearing in my menu as it is showing as flat in chrome,IE as well as firefox.So how do I modify in order to get the same menu as shown in 1st figure.
Here is my menu css:
.menu
{
height: 18px;
margin-left:318px;
margin-top:10px;
width:914px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 14px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #1612CE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1612CE), to(#3B91F1));
background: -webkit-linear-gradient(#1612CE, #3B91F1);
background: -moz-linear-gradient(#1612CE, #3B91F1);
background: -ms-linear-gradient(#1612CE, #3B91F1);
background: -o-linear-gradient(#1612CE, #3B91F1);
background: linear-gradient(#1612CE, #3B91F1);
behavior: url(css/ie-css3.htc);
}
.blue {
background : rgb(52,119,210);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
border: 1px solid #2f8893;
}
.blue li a
{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul
{
margin: 0;
padding: 0;
z-index: 300;
text-align:right;
}
li
{
padding: 0 10px;
display:inline-block;
}
li:first-child {
float:left;
}
This is how I'm showing it:
<div class="menu blue">
<ul >
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contacts</li>
<li>Back to Article</li>
<li>How it Works?</li>
</ul>
</div>

Answer 1

Try this combination of colors: http://jsfiddle.net/TLS3Y/4/
CSS3 Please! makes all these CSS3 rules so easy :)
.menu {
border-color: #598FD1 #598FD1 #1A53A2;
border-style: solid;
border-width: 2px 1px 3px;
height: 18px;
margin-left: 318px;
margin-top: 10px;
padding: 14px;
text-align: center;
width: 914px;
background-color: #2A72D8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2A72D8), to(#1A53A2));
background-image: -webkit-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -moz-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -ms-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -o-linear-gradient(top, #2A72D8, #1A53A2);
background-image: linear-gradient(top, #2A72D8, #1A53A2);
-webkit-box-shadow: inset 0px 0px 9px #2A72D8;
-moz-box-shadow: inset 0px 0px 9px #2A72D8;
box-shadow: inset 0px 0px 9px #2A72D8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
behavior: url(css/ie-css3.htc);
}

Answer 2

First of all i encourage you to use Lea Verou's http://leaverou.github.com/prefixfree/ which saves you the pain of having to add all those prefixes for different browsers and makes just one linear-gradient declaration
Second you are not using the proper declarations for linear-gradient in webkit. Should be
-webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188))
This is the shorthand method which you should use since you are not specifying any angles for your gradient
This is also available in FF
background: -moz-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Firefox */
background: -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Webkit */
For a 3d-er look add box-shadow set on inset
box-shadow:inset 0 1px 0 #fff; // for a nice thing white line at the top of the menu
You can also chain the box-shadow declarations and have
box-shadow:inset 0 1px 0 #fff, 0 2px 5px #222 // thing white line at the top and drop shadow

Answer 3

You can emboss the ul using box-shadow:
div.blue {
box-shadow: 2px 2px 2px #888888;
}
Gradient can be made with linear-gradient. I like the generator at http://gradients.glrzad.com/.