Bonjour/bonsoir amis développeurs,

Je souhaite faire un menu vertical avec des sous menu qui apparaissent au clic sur une seule colonne. Un menu exactement comme ça en fait.
Cependant, j'ai deux problèmes. Tout d'abord, le sous-menu ne décale pas le
reste du menu qui suit. Les deux se superposent. J'ai tenté des display:block, inline-block, des z-index à tout va, sans aucun changement...

Ensuite lorsque je souhaite masquer le sous menu avec display:none pour mettre un display:block, le sous menu reste masqué.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
          <ul id="menu">
           <li><a href="#accueil">Accueil</a></li>
           <li><a href="#profil">Qui suis-je ?</a></li>
           <li class="portfolio">
                <a href="#portfolio">Portfolio</a>
                <ul class="ss-menu">
                  <li><a href="">Logos</a></li>
                  <li><a href="">Cartes de visite</a></li>
                  <li><a href="">Flyers</a></li>
                  <li><a href="">Affiches</a></li>
                  <li><a href="">Autres</a></li>
                </ul>
           </li>
           <li><a href="#contact">Contactez-moi</a></li>
         </ul>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
ul#menu{font-family:'OSP-DIN'; font-size:2em; font-weight:normal; list-style:none; text-align:center; text-transform:uppercase; margin-left:-40px;}
 
#menu li{width:250px; height:30px; text-align:center; padding-bottom:5px; display:inline-block; position:relative; z-index:1;}
#menu>li:hover{background-color:#00CCFF; width:250px; height:30px;}
#menu a{text-decoration:none; color:white; height:30px; z-index:1;}
 
li.portfolio{}
li.portfolio:active + ul.ss-menu{display:block;}
 
#menu ul.ss-menu{display:inline-block; list-style:none; margin:0; padding:0;}
#menu ul.ss-menu li{font-size:0.7em; height:15px; width:250px; position:relative; z-index:1;}
#menu ul.ss-menu a:hover{color:#5FDCF9;}
#menu ul.ss-menu a{z-index:1;}

Quelqu'un aurait il solution à mes problèmes ?