CSS
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navigation_bar li {
float: left;
border-right:1px solid #bbb;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li:last-child {
border-right: none;
}
.navigation_bar li a:hover:not(.active) {
background-color: #111;
}
.navigation_bar .active {
background-color: #708090; /*#4CAF50*/
}
Html
<div class="navigation_bar">
<ul>
<li><a href="#anasayfa">Home</a></li>
<li><a href="#haberler">Haberler</a></li>
<li><a class="active" href="#iletisim">İletişim</a></li>
<li style="float:right;"><a href="#hakkinda">Hakkında</a></li>
</ul>
</div>
Çıktı

Tags:

css navigation bar kullanımı
navigation bar css active
navigation bar nedir
navigation bar html
html navigation bar template
menu bar css
css navigation menu
menu bar html css
bar menu css
top bar menu css
navigation bar css and html
horizontal navigation bar kullanımı
navigation bar css active
navigation bar css animation
navigation bar css template
css navbar yapımı
css navigation bar align right
css navigation bar active link