Ciao a tutti, è la prima volta che scrivo e spero di non aver sbagliato sezione.

pongo subito la mia domanda:

devo creare un menu a forma di cerchio e quando uno ci clicca sopra si aprono delle "zampe" con tutte le voci del menu.

pensavo di utilizzare css e jquery. ma sono bloccato. ecco il pezzo di codice:

codice:
 
<html>
	<head>
		<style>
			#palla{background-color:#228b22;
			       width:150;
			       height:150px;
                               position: absolute;
                               top:10px;
                               left:10px;
			       border-radius: 100%;	
			       behavior: url(ie-css3.htc);
			       padding: 20px;
                               font-size: 30px;
                               color: white;
                               cursor: pointer;}
                        #palla p{margin-top: 50px;
                                 margin-left: -19px;}
			#sotto{position: relative;
                               top:100px;
                               left: 150px;
                               width: 600px;}
			#sotto span{background-color:#228b22; 
                                    margin:5px 0; 
                                    padding-left: 50px; 
                                    width:200px;
                                    display: block;}
		</style>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			$(document).ready(function() {
				$("#sotto").hide();
			});
			function muovi(divid){
				//document.getElementById(div).style.visibility='visible';
				$("#"+divid).toggle("slow");
			}
		</script>
	<head>

	<body>
		<div id='palla' onclick="muovi('sotto')">

Comunicazione</p></div>
			<div id='sotto'>
				<span>Grafica</span>
				<span>Web Design</span>
				<span>Web Marcheting</span>
			</div>
	</body>
</html>
se provate il codice con chrome o con firefox funziona.
ma con IE "stranamente" no..

Poi volevo fare in modo che le "zampe" fossero più corte in base al testo all'interno