Menu déroulant et petits problèmes liés

Bonjour,
Dans le cadre de mes étude je doit construire un site web, et j'ai des petits soucis avec mon menu deroulant horriontale. Le problème est que je ne peut pas cliquer sur les 2emes liens de mon sous-menu. Je joins à ce message mon html et mon CSS, merci d'avance à toutes les personnes qui pourront m'aider
saam38
ps: j'ai un autre soucis au niveau du menu qui n'est pas très important, mais une solution à ce probleme serait le bienvennue: j'aimerai placer mon menu tel que je puisses le voir sur toute mes pages web grâce des 'iframes'. Est-ce une solution pertinentes avec cette basile? sinon suis-je obliger de copier mon menu sur toutes mes pages?merci
voici mon menu:
<ul>
<li><a href="accueil.html" >Accueil </a>
<li><a href="#" >Qui suis-je?</a>
<ul id="sousMenu">
<li><a href="ecole.html" >Scolaire</a></li>
</ul>
</li>
<li><a href="#" >Professionnel</a>
<ul>
<li><a href="cv.pdf">Mon C.V</a></li>
<li><a href="projet.html" >Mes pojets d'avenir</a></li>
</ul>
</li>
<li><a href="#" >Mes hobbies</a>
<ul>
<li><a href="dessin.html" >Mes dessins</a></li>
<li><a href="textes.html" >Mes textes</a></li>
</ul>
</li>
<li><a href="#" >Mieux me connaître</a>
<ul>
<li><a href="region.html" >Ma region</a></li>
<li><a href="orgines.html" >Mes origines</a></li>
</ul>
</li>
<li><a href="videos.html" >Videos</a> </li>
<li><a href="logo.html" >Mon logo</a> </li>
<li><a href="contct.html" >Contact </a> </li>
<li><a href="Livre d'or.html" >livre d'or</a></li>
</ul>
et voici mon CSS:
/*style pour le munu deroulant*/
ul {
background-color:beige;
border: 1px solid #a9a9a9;
-moz-box-shadow: inset 0 0 10px black;
-webkit-box-shadow: inset 0 0 10px black;
box-shadow: inset 0 0 10px black;
height:50px;
padding: 0;
box-shadow: blur
}
li {
display: inline-block;
}
ul li li {
display: inherit;
}
ul li li li{
display: inherit;
}
ul li a {
background-color:beige;
text-decoration: none;
display: block;
height: 16px;
margin: 9px 10px 0 10px;
padding: 10px 16px;
}
ul ul {
box-shadow: inset 0 0 10px black;
position: absolute;
left: -999em;
text-align: left;
}
ul li:hover ul{
left: auto;
}
merci encore pour votre aide