fox menu

bismillah..
ni tutorial yg dimintak oleh seorang tetamu VIP dalam blog ni...saya tulis sebanyak yg saya tahu dan mampu sahaja..kalau ada masalah, tolong bagitau ye..



1st,
kod ni letak kat bahagian head...



/* foxmenucontainer
----------------------------------------------- */
#foxmenucontainer{
width: 870px;
height:26px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFEpkmnJuDHg-QfAvr5xIIqYYqoCta0XVRavpOBYNQ6LaxPEMIGqh60pR8nkG8fkMhAjPjqKX1rW-QZXPiYDFaBI3yzqNlzED7XjUjm8sfD4gqAh4HTQZB9heTq40w2zDTIBCrKjuKKZ-/s320/bg_bar2.gif) repeat-x;
display:block;
float: center;
font-family :century gothic,Arial,verdana, sans-serif;
font-size: 11px;
font-weight:normal;
border-top:1px solid #ACFA58;
border-right:1px solid #ACFA58;
border-left:1px solid #ACFA58;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEskxI_DnTPSzfGKXy-EFs9QZ8iokF4TKmVSpBsXD5DrgIzYT9xlwoZHKnlhpqm_FKFCT2M8TnIYy_q29IgxfdUcZ9mJoTodXCZGP0EMrW-_rzrGsDkAwGBJqW5pjgcyquo-3xWDf2uQ/s1600/menuhov.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 230px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDiQQhog_1OpmPc3cUezpITKw2lb0-B8V502TECq2RkTqLK3gIID8tJkCR6oLVwGk4mS0yKKFb9u36tBb0uBHCBv2Pb8d7lbep-aEfIxZ-k7QVgBEBXEc0l2lz3c6cg6TOyj4KUf3b7M/s1600/menu.jpg) repeat-x;
width: 250px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;

}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEskxI_DnTPSzfGKXy-EFs9QZ8iokF4TKmVSpBsXD5DrgIzYT9xlwoZHKnlhpqm_FKFCT2M8TnIYy_q29IgxfdUcZ9mJoTodXCZGP0EMrW-_rzrGsDkAwGBJqW5pjgcyquo-3xWDf2uQ/s1600/menuhov.jpg) repeat-x;
width: 250px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}



2nd,
kod bawah ni letak kat bahagian body..mana2 yg kamu suka.. Kalau nak masukkan dalam page element pon boleh..


<!-- Foxmenucontainer -->
<div id='foxmenucontainer'>
<div id='menu'>
<ul>
<li><a href=''>Index</a></li>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=''>kosong</a></li>
<li><a href=''>kosong</a></li>
<li><a href=''>kosong</a></li>
</ul>
</div>
</div>
<!-- /Foxmenucontainer -->