Submenu in tag "area"

Question

I have to develop this element that is in the middle (rendondo) :

I never developed such a shape in HTML/CSS, so I resorted to tag <map> and made the following code:

<div align="center">
<img src="diskbanner.png" usemap="#Map" border="0">
<map name="Map">
  <area shape="poly" coords="35,500,15,446,9,425,5,406,2,392,4,371,3,357,3,315,4,303,8,279,14,251,46,179,52,178,154,182,213,276,203,299,199,312,195,330,193,353,201,394,205,403,169,407,93,407" href="5">
  <area shape="poly" coords="60,157,111,96,162,59,222,27,276,10,320,6,342,4,395,101,343,196,324,199,298,206,272,217,249,234,227,257,165,160" href="6" id="area-6">
  <area shape="poly" coords="369,6,417,12,494,39,525,57,566,83,591,110,614,133,627,148,636,164,643,173,585,268,476,271,452,243,430,226,413,215,384,202,366,200,418,100" href="1">
  <area shape="poly" coords="654,196,680,268,686,303,690,324,690,354,687,394,682,425,675,449,665,477,656,497,646,517,535,518,477,425,490,389,494,366,496,340,493,311,486,294,597,290" href="2">
  <area shape="poly" coords="294,598,345,502,397,491,420,482,446,463,465,445,521,538,630,540,625,550,598,582,555,622,498,659,434,683,353,693,340,684" href="3">
  <area shape="poly" coords="47,521,103,428,216,426,243,459,269,478,294,491,314,497,322,498,271,598,321,692,314,693,262,684,186,654,115,604,75,561" href="4">
</map>
</div>

The problem starts when you have to display these menus on the side, when you hover over each of these shapes. I initially tried to do so:

<div class="menus">
    <div class="menu-6">
        <div></div>
        <ul>
            <li><a href="">Adesivos de vitrine</a></li>
            <li><a href="">Projeto comunicação</a></li>
            <li><a href="">Visual interna</a></li>
            <li><a href="">Adesivos de Piso</a></li>
            <li><a href="">Adesivos Recorte Especial</a></li>
            <li><a href="">Adesivos Eletrostatico</a></li>
            <li><a href="">Adesivos Perfurados</a></li>
        </ul>
    </div>
</div>

<style>

    .menus > *{
        display: none;
    }

    .menu-6{
        position: absolute;
        top:0;
        left:12%;
    }


    .menu-6 ul li { direction: rtl; text-align: left; color: #61C3D0; }
    .menu-6 ul li a{color:#aaa;font-family: Arial,Verdana;font-size:12px;text-decoration: none;}
    .menu-6 ul li a:hover{color:#61C3D0;font-weight: bold; }
</style>

<script>
    $(document).ready(function(){

        $("#area-6").mouseover(function(){
            $(".menu-6").css('display', 'block');
        }).mouseout(function(){
            $(".menu-6").css('display', 'none');
        })
    })
</script>

But it didn’t work out because of over to keep the menu open. I have the file .AI of him, only that I don’t know how to deal with Illustrator. I need to solve this urgently.