CSS3속성을 쓰면 안되나요?  border-radius나 box-shadow등으로 활용할 수 있겠는데요?

애플 매뉴와 완전히 똑같이 만드려면 테두리 이미지와 배경 이미지가 png 파일로 존재해야합니다

최대한 비슷하게 만들어 보자면

<style>

#globalheader {background:#707070 url('http://images.apple.com/global/nav/images/globalheader.png');

}

#globalheader{-khtml-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;

border-radius: 4px;}

#globalheader{khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;

-ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;

-o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;

-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;

-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;

box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;}

#globalheader{height:36px;margin:0 auto;padding:0;display:block;width:980px;text-align:left;font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;color:#333;margin-top:50px;}

#globalheader #globalnav {list-style:none outside;display: table;float: left;width: 980px;height:36px;position:relative;zoom:1;margin:0;padding:0;table-layout: fixed;

-o-transition: width 0.3s ease-in-out;

-ms-transition: width 0.3s ease-in-out;

-moz-transition: width 0.3s ease-in-out;

-webkit-transition: width 0.3s ease-in-out;}

#globalheader #globalnav li {

display: table-cell;

width: 100%;height:36px;margin:0;padding:0;zoom:1;

}

#globalheader #globalnav li:first-child a {

-moz-border-radius: 4px 0 0 4px;

-webkit-border-top-left-radius: 4px;

-webkit-border-bottom-left-radius: 4px;}

#globalheader #globalnav li:first-child .border{display:none;}

#globalheader #globalnav li a{text-align:center;position:relative;color:#FFF;font-size:13px;width: auto;background: none;display:block;float:none;text-decoration:none;height:36px;outline:none;cursor:pointer;vertical-align:middle;}

#globalheader #globalnav li a:hover .hover{display:block;}

#globalheader #globalnav li a span{height:36px;}

#globalheader #globalnav li a .text{z-index:3;position:relative;top:8px;}

#globalheader #globalnav li a .border{z-index:1;float:left;background:url('http://images.apple.com/global/nav/images/globalnav.png') -100px 0;width:3px;}

#globalheader #globalnav li a .hover{display:none;z-index:2;width:100%;height:36px;position:absolute;background:rgba(0,0,0,0.3);left:1px;padding-right:1px;}

#globalheader #globalnav li:first-child .hover{left:0px;padding-right:2px;border-top-left-radius:5px;border-bottom-left-radius:5px;}

#globalheader #globalnav li:last-child .hover{left:1px;border-top-right-radius:5px;border-bottom-right-radius:5px;padding:0}

</style>

    <nav id="globalheader">

    <ul id="globalnav">

        <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

            <li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>

        </ul>

    </nav>