/* #submenu { position:absolute; left:-20px; list-style-type: none;} 
        #menu_item:hover + #submenu { display: block; }
 */     /* the menu is the list, you don't need a wrapping div */
        #menu{
            width:100%;
            /* background:#000; */
            text-align:center;
        }

        /* only mainmenu listitems */
        #menu > li{
            display:inline-block;
            position:relative;
            line-height:35px;
        }

        /* links in mainmenu and both submenus */
        #menu a{
            display:block;
            text-decoration:none;
            padding:0px 10px;
            /* color: yellow; */ /* #fff; */
            text-align:center;
        }

        /* submenus of both levels */
        #menu li ul{
            position: absolute;
            top: 20px;
            text-align: left;
            left:-70px; /*  serve per spostare a destra e sinistra gli items */
            min-width:150px; 
            /* background-color:rgba(0,0,0,0.5); */
            list-style-type: none;
            }
        ul > li+li {
            line-height: 15px;

        }

        /* move the second level submenu to the right to don't overlap the parent submenu */
/*         #menu ul ul{
            top:0;
            left:150px;               
        } */

        /* hover effect for submenu links */
        #menu li li a:hover{
        background:rgba(255,255,255,0.5);
        }

        /* hide all submenus for default */
        #menu li ul{
            display: none;
        }

        /* show a submenu if the direct parent listitem is hovered */
        #menu li:hover > ul{
            display:block;
        }
        .colorblack {
            color:black;
        }
        .colorClicked {
            color: black;
            font-weight: bold;
        }