CODEWITHSUNDEEP
cssmenunavigation
Smith Foto
Smith Foto

Reputation: 159

How to add navigation menu with header line on the top

image sample : https://i.sstatic.net/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.

Upvotes: 0

Views: 196

Answers (1)

1andsock
1andsock

Reputation: 1567

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/

Upvotes: 1

Related Questions