zooming - Cut a navigation bar with different colors (with CSS 2.1)

Question

Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:

Already two days I have been working on it, and could not find any way which will look the same look while zooming...

EDIT:

• need to be done with CSS2.1

• right and left borders are rounded + have shadow (right left correspondingly)

• there is a shadow on bottom as well

Answer 1

Should be simple enough.

<div id="navbar">
    <a href="news" style="background-color: black;">News</a><a href="business" style="background-color: orange;">Business</a>......<a href="deals" style="background-color: blue;">Deals</a>
</div>

CSS:

#navbar > a {
   padding: 10px;
   box-shadow: 4px 4px 16px black;
   color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }

Answer 2

It's a pretty simple solution. You can use just css. I used jQuery to assing the colors but it's a straightforward process... http://jsfiddle.net/elclanrs/QtLv5/2/

html

<ul>
    <li><a href="#">Option1</a></li>
    <li><a href="#">Option2</a></li>
    <li><a href="#">Option3</a></li>
    <li><a href="#">Option4</a></li>
    <li><a href="#">Option5</a></li>
</ul>

css

li { float: left; }
a {
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    color: black;
    font: bold 15px Arial;
}

/* If you assign unique ids to your menu items you can do */
#item { background: red; }

​</p>