Появление меню после нажатия на изображения

[pagemaster]

Здравствуйте!
Есть сайт ТЫЦ

Есть круг с фактами и js который двигает куски по area. Нужно сделать чтобы когда нажимаешь на 1 с кусков открывалось снизу (под кругом) меню аналогичное главному (верхнему горизонтальному) с теми же цветами, только в виде закладок.
Пример как это должно выглядеть:


Посоветуйте как привязать к области <area> нажатие мыши и при этом чтобы в другом месте раскрывалось мое "меню" с описанием. Оно должно идти типа закладками... как на скрине.

Я пытался сделать по аналогии с верхнем меню... но знаний маловато...
Как это лучше и проще сделать, через JS или через CSS?

Есть вот такой вот CSS верхнего меню:

.nav-container {
    height: 35px;
    margin-bottom: 20px;
    position: relative;
}
#nav { float:left; height: 44px; font-size:13px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1010px;
    z-index: 9999;
} 

/* ALL Levels */ /* Style consistent throughout all nav levels */
#nav li {
	text-align:left; 
	float: left;
    margin: 0 2px 0 0;
    padding: 0;
    position: relative;
    width: 165px;	}
#nav li.over { z-index:999; }
#nav li#menu-shop a {
    border-bottom: 7px solid #E31E25;
    color: #E31E25;
}
#nav li#menu-mission a {
    border-bottom: 7px solid #EF7F1B;
    color: #EF7F1B;
}
#nav li#menu-advocacy a {
    border-bottom: 7px solid #FFD80E;
    color: #FFD80E;
}

#nav li#menu-support a {
    border-bottom: 7px solid #51AE3B;
    color: #51AE3B;
}

#nav li#menu-phakty a {
    border-bottom: 7px solid #3EBAC6;
    color: #3EBAC6;
}

#nav #menu-spacer2 p {
    border-bottom: 7px solid #56698F;
    color: #56698F;


#nav li a, #nav li p {
	font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    margin: 0;
	padding-bottom:4px;
}
#nav li li a {
    border-bottom: none !important;
	color:#fff !important;
}

#nav a,
#nav a:hover { display:block; text-decoration:none; color:#00112A;
 }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/* 0 Level */
#nav a { width:165px; padding: 0; text-align:left;}
#nav li.over a,
#nav a:hover, #nav li a:hover { }
#nav a:hover {color:#999 !important;  }
#nav li:hover a {  }
#nav li.over, #nav li:hover {}
#nav li.active {background:#efefef url(../images/menu_active.gif) repeat-x; }
#nav li.active a{ color: #444 !important;  }
#nav li.parent a {background:url(../images/menu_bullet.png) no-repeat 90% 50%; padding-right: 28px;}
#nav li.active a:hover { color: #444 !important; } 
#nav li.home, #nav li.home a:hover { -moz-border-radius: 8px 0px 0px 8px;-webkit-border-radius: 8px 0px 0px 8px;border-radius: 8px 0px 0px 8px; }
#nav li.home a{ padding-left: 12px;}
#nav li.home a:hover { color: #444; }
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; background:none; margin:0; padding:0;text-transform:none; }
#nav ul li.parent { background:url(../images/bkg_nav_parent.gif) no-repeat 100% 50%; }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; background:none; }
#nav ul li a { font-weight:normal !important; }

/* 2nd Level */
#nav ul { color: #FFFFFF;
    display: none;
    font-size: 0.83em;
    font-weight: normal;}

/* Show menu */
#nav li#menu-shop ul {background: none repeat scroll 0 0 #E31E25;}
#nav li#menu-mission ul {background: none repeat scroll 0 0 #EF7F1B;}
#nav li#menu-advocacy ul {background: none repeat scroll 0 0 #FFD80E;}
#nav li#menu-support ul {background: none repeat scroll 0 0 #51AE3B;}
#nav li#menu-phakty ul {background: none repeat scroll 0 0 #3EBAC6;}
#nav li#menu-spacer2 ul {background: none repeat scroll 0 0 #4C3A8C;}


#nav li ul li {border-bottom: 1px dotted #FFFFFF;}
#nav li ul li:last-child{
    border-bottom: medium none;
}
#nav li ul a {
	display: block;
    padding: 5px 10px;
	width:145px;}


#nav li.over > ul { display:block; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav li:hover > ul li:hover {background-image:none !important; }
#nav li.parent > ul li a { background-image:none; }
#nav li.parent > ul li a:hover { background-image:none; }
#nav ul li a {  padding:6px 10px;  }
#nav ul li.last a { border-bottom: 0px; }
#nav ul li a:hover { background:#7DE7F7; color:#E43D2E !important; }

/* 3rd+ Level */
#nav ul ul { top:5px;border: 1px solid #bdbdbd; }
#nav ul ul li a { border-width: 1px 0px; }