[RÉGLÉ] peaufiner les css du menu

[raph_egg]

Bonjour,

j'ai avancé dans le paramétrage des css de mon menu. Je souhaite obtenir le résultat suivant (pour la partie menu):



pour le moment, le résultat est le suivant

certains points me posent problème :

comment agrandir le rectangle des entrées du menu au premier niveau (Le Musée, Informations, ...) afin qu'il y ait davantage d'espace en haut et en bas?
les entrées de menu de second niveau doivent être transparents de manière à afficher l'orange derrière. La partie gauche de l'identation doit également être transparente afin d'afficher l'image derrière.

voici l'état de mon code :

html {
  height: 101%;
}

body {
  color : white;
  background : black;
  font-family: Arial, sans-serif;
  font-size : 12px;
  padding : 0;
  margin : 0;
}

img {
  border : none;
}

a {
  color : #9e9e9e;
}

a:hover {
  text-decoration : none;
}

a:focus {
  outline: none;
}

.clr {
  clear : both;
}

li {
  list-style : none;
}

p {
  padding : 4px 0 4px 0;
  color : white ;
}

* {
  margin : 0;
  padding : 0;
}

h1, h2, h3, h4, h5 {
  font-size : 14px;
  font-weight : normal;
}

#wrapper {
  margin: 0 auto ;
  border : white;
  background : none;
  width : 1200px ;
  height : 400px ;
  /*vertical-align : center ;*/
  margin-top: 210px;
  border: 1px solid #fff;
}



#logo a {
  width: 450px;
  height: 90px;
  display: block;
}

#news {
  height: 100px;
  width: 500px;
  float: left;
}

#topmenu {
  height: 50px;
}

#conteneur {
  padding : 10px;
}

#slideshow {
  height: 235px;
  clear: both;
  margin: 10px 0 10px 0;
}

#breadcrumbs {
  height: 20px;
}

#gauche {
  width: 210px;
  float: left;
}

#centre.normal{
  float: left;
  width: 590px;
}


#centre.large {
  float: left;
  width: 790px;
}

#centre div.interne {
  padding: 10px;
}


#droite {
  width: 200px;
  float: left;
}

#footer {
  padding: 10px;
  text-align: center;
}


h3 {
  color: #9e9e9e;
  font-size: 14px;
  font-weight: bold;
  padding-left: 20px;

}

ul.menu li {
  background: black;
  border-bottom: 30px solid none;
  line-height: 20px;
  
/*margin:5px 0 5px 0;*/

}

ul.menu li ul li{
  margin-left: 10px;
  background: #666;

}

ul.menu li a {
  color: #fff;
  text-decoration: none;
  line-height: 25px;
  padding-left: 10px;

}

ul.menu li a:hover {
  color: #000;
}


/*** module gris ***/
div.moduletable_gris h3 {
  height: 36px;
  background: url(../images/titre_modulegris.png) left top repeat-x;
  line-height: 30px;
  color: #fff;
  font-weight: normal;

}

div.moduletable_gris {
  background: #9e9e9e url(../images/bas_modulegris.png) left bottom repeat-x;
  padding-bottom: 35px;
  color: #fff;
  margin-top: 10px;
}

div.moduletable_gris a {
  color: red;
  padding-left : 10px;
  line-height: 20px;
}

/*** formulaires ***/
input#modlgn-username, input#modlgn-passwd {
  width: 153px;
  height: 28px;
  line-height: 25px;
  background: url(../images/login_form.png) left top no-repeat;
  border: none;
  margin: 0;
  padding: 0px 0 5px 10px;
}

#login-form fieldset{
  border: none;
}

#login-form li{
  line-height: 20px;
}

input.button {
  background: #333;
  color: #fff;
  border: none;
  padding: 7px;
  cursor: pointer;
}
#pied{
   background : blue;
   width : 500px ;
  margin-top: 100px;
  /*float: bottom ;*/
 }

#picture {
  z-index: 4;
  position:absolute;
  width:285px;
  height:70%;
background:url(../images/epicerie_1.png) no-repeat red;
    border: 1px solid red;
}
#picture ul {
margin-left:100px;
}
#picture ul li li {
text-indent:0px;
  text-align: left;
color:white;
background:#E9982E;
  z-index:8;
}
#contenu_principal {
  padding-left: 100px;
  padding-top: 100px;
  background : #E9982E ;
  width : 1000px ;
  height : 58% ;
  margin-top: 0px;
  margin-left: 250px ;
  border: 1px solid red;
  position : absolute;
  z-index: 1;
}
#menu_principal {
  background : black ;
  width : 5% ;
  position : relative ;
  float: center;
  border: 1px solid #fff;
}
#logo {
  width : 50% ;
  height : 100% ;
  margin-top: 0px;
  margin-left: 500px ;
  position : absolute;
  /*float: right ;*/
  background: url(../images/logo_2011.png) right top no-repeat;
  /* border: 1px solid #fff; */
}

#juste_un_conteneur {
  background : black ;
  width : 98% ;
  height : 20% ;
  margin-top: 10px;
  margin-right : 10px ;
  position : relative ;
}

#youtube{
  width:100px;
  height:100px;
margin-top: 600px;
margin-right : 0px ;
background : red ;
float: right ;
  position:absolute;
  
background:url(../images/youtube_logo.png) no-repeat black;
}
#facebook{
    width:100px;
  height:100px;
margin-top: 500px;
margin-right : 10px ;
background : red ;
float: right ;
  background:url(../images/facebook_logo.png) no-repeat black;
    position:absolute;
}
#menu_musee{
  z-index: 10;
  position:absolute;
  width:250px;
  height:250px;
  /*border: 4px solid red;*/
  margin-left:200px;
  margin-top:20px;
  background:none;
}

#menu_musee ul li  {
    width:250px;
  text-align: left;
  color:white;
  background:black;
  border: 1px solid white;
    font-size : 22px;
  height:100px;

}
#menu_musee ul li li {
      width:250px;
text-indent:70px;
  text-align: left;
color:white;
background:none;
    z-index:2;
  font-size : 14px;
}

merci pour votre aide