/* language menu */
div#top_menu{
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

/* main menu */
/*
http://uxmilk.jp/60712
http://weboook.blog22.fc2.com/blog-entry-408.html
*/
#nav {
    list-style: none;
    display: flex;
}

#nav li {
    /*width: 120px;*/
    text-align: center;
    /*background-color: #fff;*/
    height: 20px;
    /*line-height: 20px;*/
    margin-right: 1px;
}

#nav li a {
    text-decoration: none;
    color: #00f;
    /*font-weight: bold;*/
    padding: 5px;
}

/* 要素の上にマウスが乗っている */
#nav li a:hover{
    text-decoration: underline;
    background-color: #ddd;
}

/* アクティブになっている(マウスを押している) */
#nav li a:active{
    background-color: #888;
}

/* sub menu */
#nav li ul {
    list-style: none;
}

#nav li ul li{
    overflow: hidden;
    height: 0;
    transition: .2s;
}
#nav li:hover ul li{
    overflow: visible;
    height: 16px;
}