<nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Sitemap</a></li> <li class='login'><a href='#'>Log In</a></li> </ul> </nav>
/* Layout */ body{ background:#eee; padding:0; } @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); nav ul{ padding:0; width:1200px; margin:50px 10px; list-style:none; text-align:center; /* Cara membuat link navigasi rata tengah. */ } nav ul li{ display:inline-block; /* inline-block mengikuti kondisi block dan posisi inline akan tetap di tengah */ margin-right:-5px; } nav ul li a{ color:#fff; background:#ee6666; padding:25px 40px; display:block; text-decoration:none; font:700 15px 'open sans',sans-serif; text-transform:uppercase; transition:all .2s ease-in; -moz-transition:all .2s ease-in; -webkit-transition:all .2s ease-in; } .login a{ background:#263138; } .login a:hover{ background:#00bfff; } nav ul li a:hover{ background:#222; }