コメント：CSS3を使用したHTML5によって作成されたメニュー効果。効果を確認するには実行してください
実装の難しさは、最初の子供、最後の子供2つのセレクター、後のマージン左：-1px;、33％および34％のスキル処理の適用にあります。
別の難しさは次のとおりです。Box-Shadow：1PX 0 0＃F1F1F1 INSET;実装。
ついに：
背景：-webkit-gradient（線形、左上、左下、（＃f9f9f9）、（＃b6b4b4））; background：-moz-linear-gradient（top、＃f9f9f9、＃b6b4b4）; ＃F9F9F9、＃B6B4B4）;背景：線形勾配（TOP、＃F9F9F9、＃B6B4B4）;背景：線形勾配（TOP、＃F9F9F9、＃B6B4B4）;
<！doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml：lang = "en">
<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> HTML5、CSS3メニュー</title>
<style type = "text/css">
.jikey_demo {width：80％;マージン：0 Auto;背景：＃f1f1f1;}
.news_info {margin-bottom：5px; border：1px solid #bbb; border-radius：5px; box-shadow：0 1px 0＃f1f1f1;}
.news_info {display：inline-block; width：33％; height：26px; font-family： "microsoft yahei"; line-height：26px; text-align：center; color：＃555; border-right：1px solid＃ccc; box-shadow：1px 0＃f1f1f1inet;}
.news_info a：first-child {width：33％; box-shadow：none; border-radius：4px 0 0 4px;}
.news_info a：last-child {width：34％; border-right：none; margin-left：-2px; border-radius：0 4px 4px 0;}
.news_info a：Hover、.news_info a.current {color：＃208edd; background：-webkit-gradient（線形、左上、左下、（＃f9f9f9）、（＃b6b4b4））; ＃B6B4B4）;背景：-o-linear-gradient（top、＃f9f9f9、＃b6b4b4）; background：-o-linear-gradient（top、＃f9f9f9、＃b6b4b4）;背景：線形勾配（トップ、＃f9f9f9、＃b6b4b4）; ＃b6b4b4）;}
</style>
</head>
<body>
<div>
<nav> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </nav>
</div>
</body>
</html>