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"><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">Back to Article</a></li>
        <li><a href="">How it Works?</a></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);
}