我這個應該ok吧？

<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS制作立體導航</title>
<link?rel="stylesheet"?>
<style>
body{
?background:?#ebebeb;
}
.nav{
?width:560px;
?height:?50px;
?font:bold?0/50px?Arial;
?text-align:center;
?margin:40px?auto?0;
?????background:?#f65f57;
?/*制作圓*/
?border-radius:?8px;
??????????/*制作導航立體風格*/
??????????box-shadow:?4px?4px?1px?4px?rgba(255,0,0,0.5);
}
.nav?a{
?display:?inline-block;
?-webkit-transition:?all?0.2s?ease-in;
?-moz-transition:?all?0.2s?ease-in;
?-o-transition:?all?0.2s?ease-in;
?-ms-transition:?all?0.2s?ease-in;
?transition:?all?0.2s?ease-in;
}
.nav?a:hover{
?-webkit-transform:rotate(10deg);
?-moz-transform:rotate(10deg);
?-o-transform:rotate(10deg);
?-ms-transform:rotate(10deg);
?transform:rotate(10deg);
}

.nav?li{
?position:relative;
?display:inline-block;
?padding:0?16px;
?font-size:?13px;
?text-shadow:1px?2px?4px?rgba(0,0,0,.5);
?list-style:?none?outside?none;
}
/*使用偽元素制作導航列表項分隔線*/
????????.nav?li:before{
????????????content:"";
????????????position:absolute;
????????????top:15px;
????????????left:?2px;
????????????height:?20px;
????????????width:?1px;
????????????background-image:?linear-gradient(to?bottom,rgba(150,150,150,0),rgba(100,100,100,1),rgba(150,150,150,0));
????????}
????????/*刪除第一項和最后一項導航分隔線*/
????????.nav?li:first-child:before{
????????????display:?none;
????????}
????????
.nav?a,
.nav?a:hover{
?color:#fff;
?text-decoration:?none;
}

</style>
</head>
<body>
<ul>
?????<li><a?href="">Home</a></li>
?????<li><a?href="">About?Me</a></li>
?????<li><a?href="">Portfolio</a></li>
?????<li><a?href="">Blog</a></li>
?????<li><a?href="">Resources</a></li>
?????<li><a?href="">Contact?Me</a></li>
</ul>
</body>
</html>