<div id="menu">
    <ul>
        <li><a href="#nogo">Indonesia</a>
            <ul>
                <li><a href="#nogo">Jakarta</a></li>
                <li><a href="#nogo">Malang</a></li>
                <li><a href="#nogo">Surabaya</a></li>
            </ul>
        </li>
        <li><a href="#nogo">USA</a>
            <ul>
                <li><a href="#nogo">California</a></li>
                <li><a href="#nogo">New York</a></li>
                <li><a href="#nogo">Texas</a></li>
            </ul>
        </li>
        <li><a href="#nogo">Japan</a>
            <ul>
                 <li><a href="#nogo">Tokyo</a></li>
                 <li><a href="#nogo">Osaka</a></li>
                 <li><a href="#nogo">Nagasaki</a></li>
            </ul>
        </li>
    </ul>
</div>

<style>

#menu li{
position: relative;
float: left;
}

#menu li a{
width:100px;
height: 30px;
display: block;
background: lime;
}

#menu ul ul{
position: absolute;
visibility: hidden;
}

#menu ul li:hover ul{
visibility:visible;
}
</style>