JSFiddle - React, Tailwind, and code Playground

by jeryagus

HTML

<div class="bilah-menu-atas" id="bilahmenuatas">
<div class="kolom-utama">
<div class="kolom-menu">
<ul>
<li><a href="http://eltelu.blogspot.com/"><img alt="L3" src="https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png" height="13px" border="0" width="24px"></a></li>
<li><a href="#">Tab Menu Kiri 1</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.b</a></li>
<li><a href="#">Sub Menu Tingkat 1.c</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.b</a></li>
<li><a href="#">Sub Menu Tingkat 2.c</a>
<ul>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.a</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.b</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.c</a></li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 3.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 2.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Sub Menu Tingkat 1.d</a></li>
</ul>
</li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kiri 2</a></li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kiri 3</a></li>
</ul>
</div>
<div class="kolom-menu" style="float: right;">
<ul style="float: right;">
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kanan 1</a></li>
<li><a href="http://eltelu.blogspot.com/">Tab Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>

CSS

/*----------------------------------------------------------------
Kustomisasi Bilah Navbar Yang Terdapat Di Atas Header Halaman Blog
Oleh: jery agus;
Blog: logcyber
URL : http://logcyber.blogspot.com/
-----------------------------------------------------------------*/

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada bilah navigasi pengganti navbar
-----------------------------------------------------------*/
.bilah-menu-atas {
width: 100%; 
min-width: 968px;
position: fixed;
top: 0px; 
left: 0px;
right: 0px;
height: 29px;
font: 13px Arial;
z-index: 99;
white-space: nowrap;
background: #1975D1;
background: -moz-linear-gradient(center top , #1975D1 0%, #00478F 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#1975D1), to(#00478F));
box-shadow: 0px 2px 4px rgb(14, 90, 140);
border-bottom: 1px solid     #4D94DB;
}

.kolom-utama { 
z-index: 100;
width: 968px;
height: 27px;
margin: 0px auto;
padding: 0px;
}

.kolom-menu {
width: auto;
height: auto;
margin: 0px;
float: left;
display: inline;
}

.kolom-menu ul {
height: auto;
margin: 0px;
padding: 0px;
}

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada tab menu
-----------------------------------------------------------*/
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
margin-right: 1px;
margin-left: 1px;
padding-left: 1px;
padding-right: 1px;
height: 25px;
border-top: none;
border-bottom: 1px solid #3385D6;
border-left: 1px solid #3385D6;
border-right: 1px solid #3385D6;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
background: #005CB8;
background: -moz-linear-gradient(center top , #005CB8, #003D7A) repeat scroll 0% 0%;
background: -webkit-gradient(linear, left top, left bottom, from(#005CB8), to(#003D7A));
}

/* Keterangan:
   Setelan warna huruf dapat diubah dengan mengganti kode warna
   yang...