Membuat MenuFloat dengan SubMenu

Hai hai...
sekarang saya mau share menu melayang nih
Yah tampilannya sih sama kayak menu biasa sih
tapi ini udah aku modif jadi melayang gitu.... XD
tampilannya juga jadi pas sama layar gitu...
okeh langsung aja yah

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