Cara Membuat Menu Float Dengan SubMenu Full CSS3 (Menu Bawah)

Cara Membuat Menu Float Dengan SubMenu Full CSS3 (Menu Bawah) - Tak dipungkiri menu navigasi dalamsuatu blog sangat dibutuhkan, selain untuk mempermudah pengaksesan blog menu navigasi juga bertujuan untuk lebih mempercantik blog dan memberi kenyamanan bagi pengunjung yang sedang membaca artikel paa blog anda. Kali ini akan saya share Cara Membuat Menu Float Dengan SubMenu Full CSS3 (Menu Bawah), yang pasti tutorialnya sangat mudah an suah saya sesuaikan engan mayoritas blog i dunia maya. Berikut tutorialnya:

1. Masuk Ke Blogger
2. Klik Tab Rancangan
3. Klik Edit HTML
4. Masukin CSS ini sebelum kode ]]></b:skin>

#floatnav{
font-family:Comic Sans Ms;
padding:2px;
z-index:10000;
position:fixed;
bottom:0px;
right:0px;
}
a:hover{-webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out;}
.nav-container-outer{
padding: 0px;
height: 40px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.nav-container{
position:relative;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:-10;
}
.nav-container ul ul{
z-index:-20;
}
.nav-container ul ul ul{
z-index:-30;
}
.nav-container ul ul ul ul{
z-index:-40;
}
.nav-container ul ul ul ul ul{
z-index:-50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
bottom:100%;
}
#nav-container ul li:hover>ul{
bottom:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/ 
#nav-container a{ 
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Comic Sans MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background:#000;
background-repeat: no-repeat;
background-position: top;
border-radius:8px;
border:2px dashed #ff0000;
}

#nav-container a:hover{
color: #ff0000;
background: #fff;
background-repeat: no-repeat;
background-position: center;
border-radius:8px;
border:2px solid #ff0000;
}

/*^'^ Secondary Items Container ^'^*/ 
#nav-container div, #nav-container ul{ 
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: #000;
background-repeat: repeat-x;
background-color: #FF0000;
border-radius: 8px;
border:3px solid #000;
} 
#nav-container div a, #nav-container ul a{ 
margin: 0 5px 0 0;
padding: 6px 13px;
background-color: #ff0000;
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
width: 100px;
}
#nav-container div a:hover, #nav-container ul a:hover{ 
background-color: #ff0000;
background-repeat: no-repeat;
color:#000;
}
#nav-container .item-secondary-title{ 
cursor:default;
padding:4px 0px 3px 7px;
color: #000;
font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: #fff
background-repeat: no-repeat;
font-weight:bold;
}
#nav-container .divider-horiz{ 
border-bottom-width:2px;
margin:5px 5px;
border-color: #fff;
}
#nav-container .divider-vert{ 
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#ff0000;
}

5.       Setelah itu masuk ke tamah widget, lalu klik HTML/Javascript 

6.     Masukin Script pemanggil CSS ini ke Text Area HTML/Javascript tadi.

<div class="nav-container-outer" id='floatnav'>
    <ul id="nav-container" class="nav-container">
    <li><a class="item-primary" href="#">HOME</a>
    </li>
    <li><span class="divider divider-vert" ></span></li>
    <li><a class="item-primary" href="#">EDIT MENU</a> 
    <ul style="width:150px;">
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    </ul></li>
    <li><span class="divider divider-vert" ></span></li>
    <li><a class="item-primary" href="#">EDIT MENU</a> 
    <ul style="width:150px;">
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    <li><a href="#">EDIT SUB MENU</a></li>
    </ul></li>
    <li><a href="#">TOP</a></li>
    <li><a href="#footer">BOTTOM</a></li>
    </ul>
    </div> 

 7.    Simpan Deh... ^^

Catatan : Untuk Tulisan TOP dan Bottom Bisa kamu ganti dengan gambar... dan untuk menu dan submenunya bisa kamu ganti atau kamu hapus dengan menumu sendiri.... ^^

Sekian.... =D

Thanks God!