<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="header_top"></div> <div class="menu"> <header class="container"> <div class="navbar navbar-inner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="closepage" menuid="0" class="brand" href="#" followlink="true"> LOGO</a> </div> <div class="collapse navbar-collapse pull-right" id="main-menu"> <ul class="nav"> <li class="fadeInDown animated d1 "><a href="#" class="active" id="home" menuid="0" followlink="true" >Home</a></li> <li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">About</a></li> <li class="dropdown fadeInDown animated d3"> <a href="#" class="trigger right-caret">Service</a> <ul class="firstlevel dropdown-menu sub-menu" style="display: none;"> <li class="twolevel"> <a class="trigger right-caret">Email Support</a> <!-- <ul class="thirdlevel dropdown-menu sub-menu" style="margin-left: -563px; display: none;"> <li><a href="#" menuid="220" followlink="true">ŞİRKET BİRLEŞME & SATIN ALMA</a></li> <li><a href="#" menuid="221" followlink="true">HALKA ARZ</a></li> <li><a href="#" menuid="222" followlink="true">TAHVİL/BONO İHRACI</a></li> <li><a href="#" menuid="223" followlink="true">DANIŞMANLIK</a></li> </ul>--> </li> <li><a href="#" menuid="224" followlink="true">Router Support</a></li> <li class="twolevel"> <a class="trigger right-caret">Antivirus Support</a> <!-- <ul class="thirdlevel dropdown-menu sub-menu"> <li><a href="#Forex" menuid="311" followlink="true">FOREX</a></li> <li><a href="#CFD" menuid="312" followlink="true">CFD</a></li> <li><a href="#Hisse" menuid="3" followlink="true">HİSSE/VİOP</a></li> <li><a href="#Turev" menuid="4" followlink="true">TÜREV</a></li> <li><a href="#UluslararasiPiyasalar" menuid="5" followlink="true">ULUSLARARASI PİYASALAR</a></li> </ul>--> </li> <li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Quickbook Support</a></li> <li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Printer Support</a></li> <li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Game Support</a></li> </ul> </li> <li class="fadeInDown animated d3"><a href="#Iletisim" menuid="11" followlink="true">Dislaimer</a></li> <li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">Blog</a></li> <li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">Contact Us</a></li> </ul> </div> <!--/.nav-collapse --> </div> </header> </div><!--menu-->

.header_top{ width:100%; height:10px; background:#00e3ff; } .menu{ width:100%; background:#fff; box-shadow:0 3px 3px rgba(146,146,146,1.00); } .slider{ width:100%; } .navbar-inner { margin-top: 0; background: #fff; box-shadow: none; border: none; height: 55px; } .navbar-inner .brand { margin-top: 14px; display: block; } .navbar .nav > li { float: left; height: 75px !important; } .navbar .nav > li > a:hover, .navbar .nav > li > a:active, .navbar .nav > li > a:focus, .navbar .nav > li > a.active, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .active-menu { background: #00e3ff !important; color: #000 !important; } .navbar .nav > li > a { color: #00e3ff !important; float: none; height: 100%; font-family: 'Roboto', sans-serif; line-height: 70px; padding: 0 15px; text-decoration: none; text-shadow: none; letter-spacing: 2.322px; } .dropdown-menu > li { position: relative; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; cursor: pointer; } #main-menu { font-family: 'Roboto', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; } .dropdown-menu { background-clip: padding-box; background: #00e3ff; border: none; border-radius: 0; box-shadow: none; float: left; left: 0; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1000; } .dropdown .sub-menu li > a { padding-top: 15px; padding-bottom: 15px; text-decoration: none; text-shadow: none; font-family: 'Roboto', sans-serif; letter-spacing: 1.322px; color: #000 !important; border-right: 6px solid #000; border-left: 1px solid #efefef; } .dropdown .sub-menu { margin-top: -1px; } .dropdown .sub-menu li { border-top: 1px solid #efefef; } .dropdown .sub-menu li:nth-child(1) { border-top: 1px solid #efefef; } .dropdown .sub-menu li > a:hover { border-right-color: #A1A1A1; } .secondlevel { left: 100%; } .thirdlevel { left: 100% !important; top: 0px !important; } .forthlevel { left: 100% !important; top: 0px !important; } .navbar-toggle .icon-bar { background-color: #888; } .navbar .nav > li > .dropdown-menu::before { position: absolute; top: -7px; left: 43px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #CCC; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .navbar .nav > li > .dropdown-menu::after { position: absolute; top: -6px; left: 43px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid white; border-left: 6px solid transparent; content: ''; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #00e3ff; color: #262626; text-decoration: none; }