如何在顶部添加带有标题行的导航菜单

Question

图片样本：http://i.stack.imgur.com/SxZ8D.jpg

任何人都可以帮助构建像这张带有悬停和活动的图片的 css 菜单。

尤其是导航菜单顶部的行，在活动和悬停时带有白点。

Answer 1

试试这样的（我只在 Chrome 和 Firefox 上测试过，只是为了让你知道）：

nav ul li{
   display:inline-block;
   font-family:"Helvetica Neue", Arial, sans-serif;
}

nav ul li a{
   padding:8px 10px 0 0;
   text-decoration:none;
   color:#F86659;
   border-top:6px #7F170E solid;
   font-size:.9em;
   margin:0;
}

nav ul li.selected a{
   color:#FFF;
}

.circle {
   background: #7F170E;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position:relative;
   left:-2px;
   top:-2px;
   margin:0 auto;
}

nav ul li.selected .circle{
   background: #FFF;
   border:4px #7F170E solid;
}

一个示例 JSFiddle：http://jsfiddle.net/7P8qv/