How to add navigation menu with header line on the top

Question

image sample : https://i.stack.imgur.com/SxZ8D.jpg

any one help to build css menu like this picture with hover and active.

especially line on the top of navigation menu with white dot when active and hover.

Answer 1

Try something like this (I only tested on Chrome and Firefox, just to let you know):

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;
}

An example JSFiddle: http://jsfiddle.net/7P8qv/