#fixed {
height: 40px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
#fixedinner {
background: none repeat scroll 0 0 transparent;
height: 40px;
position: relative;
text-align: center;
z-index: 999;
}
#top-wrapper {
background: url("#") repeat-x scroll 0 0 #242424;
border-bottom: 1px solid #444444;
border-top: 3px solid #1599ED;
margin: 0 auto;
}
#topbar {
height: 44px;
margin: 0 auto;
width: 980px;
}
#top {
width: 980px;
}
#top, #top ul {
font-family: Arial,serif;
list-style: none outside none;
margin: 0;
padding: 0;
}
#top a {
border-left: 1px solid #191919;
border-right: 1px solid #484747;
color: #CECECF;
display: block;
font: 11px Arial;
padding: 7px 10px;
text-decoration: none;
text-transform: none;
}
#top a.arrow {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AbCqxr_c4OActPnaKm_NBbazODi_undEXN9YcmEgGgJkmct9c4YLDNClhuiQ8FSAafWJVWcNNBoWfcyPZf9TwoHXNzSAGSUGJNXN544ukvVSwMSCew7Fu9r7gQ_dXzr0VkNAPgJ_Nzk/s1600/arrow_white.gif");
background-position: right center;
background-repeat: no-repeat;
padding: 7px 24px 7px 10px;
}
#top li {
float: left;
position: static;
width: auto;
}
#top li ul, #top ul li {
width: 170px;
}
#top ul li a {
border: medium none;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: 400;
padding: 5px 10px;
text-align: left;
text-transform: none;
}
#top li ul {
background: none repeat scroll 0 0 #222222;
display: none;
padding-bottom: 0;
position: absolute;
z-index: 100;
}
#top li:hover a, #top a:active, #top a:focus, #top li.hvr a {
background-color: #222222;
color: #FFFFFF;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
background-color: transparent;
color: #EDFDFD;
text-decoration: none;
}
#top li ul li.hr {
border-bottom: 1px solid #333333;
border-top: 1px solid #000000;
display: block;
font-size: 1px;
height: 0;
line-height: 0;
margin: 0;
}
#top ul a:hover {
background-color: #555555 !important;
color: #FFFFFF !important;
text-decoration: none;
}
#top a span, #top a.arrow span {
color: #FFFFFF;
display: block;
font: bold 12px/16px Arial;
text-shadow: 1px 2px 2px #000000;
text-transform: uppercase;
}
#top li:hover a span, #top li:hover a.arrow span {
color: #1599ED;
}
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href=''><span>beranda</span>Halaman Depan</a></li>
<li><a class='arrow' href='#'><span>Profil Sekolah</span>Semua Tentang Sekolah</a>
<ul>
<li><a href=''>Profil Sekolah</a></li>
<li class='hr'/>
<li><a href=''>Visi dan Misi</a></li>
<li class='hr'/>
<li><a href='#'>Fasilitas</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Organisasi</span>Leadership</a>
<ul>
<li><a href='#'>OSIS (Organisasi Siswa Intra Sekolah)</a></li>
<li class='hr'/>
<li><a href='#'>MPK (Majelis Perwakilan Kelas)</a></li>
<li class='hr'/>
<li><a href='#'>KIR (Karya Ilmiah Remaja)</a></li>
<li class='hr'/>
<li><a href='#'>ROHIS Istiqomah</a></li>
</ul>
</li>
<li><a href='#'><span>Berita Sekolah</span>Mengenai Info Sekolah</a>
</li>
<li><a class='' href='#'><span>Hubungun kami</span>Jika Perlu</a>
</li>
</ul>
</div>
</div>
</div></div>
You Might Also Like :
