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

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/