F.cher Site: Create Horizontal Sub Menu vertical menu

Horizntal Sub menu vertical menu is a side bar which when clicked on the menu next to the relevant sections of the Main Menu.
The menu is very practical to use because in the main menu is the menu sat supporter, so ga ribret if visitors come to see the blog we just stayed there just click another menu:
To make it you can use the following tutorial:

    1. Login to your account Blogspot readers
    2. Click the Layout menu link, then select Edit HTML.
    3. Back up your template first reader by clicking the Download Full Template for if an error occurs when editing, the reader can return it to upload it again.
    4. DO NOT check the small box beside the writing Expand Widget Templates
    5. After that search the code below:

<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>
6.   Copy paste kode dibawah ini dibawah kode diatas
<div id="nav">
<ul>
<li><a href="URL">NAME</a></li>
<li><a href='URL'>NAME</a>
          <ul>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
          </ul>
        </li>
<li><a href='URL'>NAME</a>
          <ul>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
          </ul>
        </li>
<li><a href='URL'>NAME </a>
          <ul>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
          </ul>
        </li>
<li><a href='URL'>NAME</a>
          <ul>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
            <li><a href='URL tambahan'>NAME tambahan</a></li>
          </ul>
        </li>
</ul>
</div>

10. Do not forget to change the URL code and name to appear

11. Next Step CSS Code Below Copy the code above ]]> b: skin>

#NavbarMenu {
background: #000;
width: 874px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 874px;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
background: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}

#nav li a:hover, #nav li a:active {
background: #c0c0c0;
color: #000;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #000;
color: #fff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

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

#nav li:hover, #nav li.sfhover {
position: static;
}