Html Kodu:
<div id="header"> <div id="wrap"> <div class="logo"><h1>LOGO</h1></div> <div class="menu"> <ul> <li class="aktif"><a href="index.html">Ana Sayfa <span class="sub">Ana Sayfaya Git</span></a></li> <li><a href="#">İletişim <span class="sub">İletişime Geçin</span></a></li> <li><a href="#" target="_blank">Biz Kimiz <span class="sub">Biz Kimiz</span></a></li> <li><a href="#">Referanslar <span class="sub">Referanslarımız</span></a></li> <li><a href="#">xxxxxxxxx <span class="sub">xxxxxxxxxxx</span></a></li> <li><a href="#">xxxxxxxxx <span class="sub">xxxxxxxxxxx</span></a></li> </ul> </div>Css Kodu:
#header { width: 100%; position: fixed; background: rgb(43, 43, 43); } #wrap { width: 950px; } .logo { display: inline-block; margin: 10px auto; font-size: 21px; } .logo h1 { color: rgb(81, 255, 243); text-shadow: 0 0 15px rgb(81, 255, 243); } .menu { float: right; height: 66px; width: auto; } .menu ul li a span { font-size: 12px; font-family: tahoma; font-weight: normal; text-transform: none; display: block; color: #AFAFAF; margin: 5px 0 0 0; text-align: center; } .menu ul { list-style: none; float: right; } .menu ul li { position: relative; float: left; margin-left: 0px; top: 0px; right: 39px; list-style: none; } .menu ul li + li:before, .transfermenu ul li:first-child:before { content: '.'; background-image: url('https://i.hizliresim.com/bLno6n.png'); display: block; width: 2px; text-indent: -9999px; height: 69px; top: 0px; position: absolute; left: -1px; } .menu ul li a { color: #fff; text-decoration: none; display: block; padding: 14.5px 10px; text-align: center; } .menu ul li a:hover { border-bottom: solid 1px rgb(81, 255, 243); color: rgb(81, 255, 243); background: url('https://i.hizliresim.com/POybD7.png') no-repeat center 35px; } li.aktif a { border-bottom: solid 1px rgb(81, 255, 243); color: rgb(81, 255, 243) !important; background: url('https://i.hizliresim.com/POybD7.png') no-repeat center 35px; }