Bonjours à tou(te)s !

Voilà, après avoir tourné et retourné dans tous les sens sur CSSActif, je me vois dans l'obligation de poser ma question... C'est pourtant pas faute d'avoir cherché partout s'il n'y avait pas déjà une réponse quelque part ! x)

Je suis actuellement en train d'améliorer ma PA et j'ai voulu mettre en place des menus déroulants... J'ai trouvé un code super sur CSSActif mais le soucis c'est que ça ne fait pas exactement ce que je voulais... lol

J'arrive pas à retrouver le sujet où est posté ce code mais niveau CSS et html ça donnait ça :

Code:

#menu ul
{margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;}

#menu li
{float: left;
padding: 0px;
background-color: #796858;}

#menu li a
{display: block;
width: 226px;
color: #FFFFFF; /* couleur du texte */
padding: 5px;
text-decoration: none;}

#menu li a:hover /* couleur du texte au passage de la souris */
{color: #70521A;}

#menu ul li ul  /* cacher les sous-catégories */
{display: none;}

#menu ul li:hover ul
{display: block;}

#menu li:hover ul li
{float: none;}

#menu li ul
{position:absolute;}

Code:

<div id="menu">
  <ul>
      <li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li>
     
      <li><a href="#">MENU 2</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li>
  </ul>
</div>
<br><div style="text-align: center;"><br>

Tout ça marche parfaitement et voici ce que ça me donne :

Cependant, ce n'est pas exactement ce que je voudrais x)
Tous ces menus sont sur la même ligne et d'un même bloc. En faite, ce que j'aimerais, c'est qu'ils soit bien dissociés. Pouvoir les encadrer chacun d'un rectangle-ovoïde comme ça :

J'ai essayé de bricoler dans le CSS mais je n'y arrive pas... Quelqu'un pourrait-il m'aider ? x)
Merci d'avance !

Bonsoir =)
Ce que je peux te proposer c'est de faire un tableau comme ceci :

Code:

<table><tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Et dans chaque colonne

Code:

 "<td></td>"

Tu copies ce code :

Code:

<div id="menu"><ul><li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li></ul>
</div>

Ce qui te donnerait :

Code:

<table><tr>
<td><div id="menu"><ul><li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li></ul>
</div></td>
<td><div id="menu"><ul><li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li></ul>
</div></td>
<td><div id="menu"><ul><li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li></ul>
</div></td>
<td><div id="menu"><ul><li><a href="#">MENU 1</a>
        <ul>
        <li><a href="lien1">titre1</a></li>
        <li><a href="lien2">titre2</a></li>
        </ul>
      </li></ul>
</div></td>
</tr>
</table>

Je vais tester ça de ce pas ! =D
Je te tiens au jus, merci !

EDIT : les "cases" n'ont pas les coins arrondis mais c'est au poil quand-même ! Merci beaucoup ! =D
Sujet clos ^^

Je te les ai dissocié mais je pensais que tu ferais l'arrondi toi-même ^^

Je classe alors =)

Je sais pas le faire en faite mais c'est pas grave ^^

Tu veux que je te regarde ça ?

Si c'est pas trop demander... <3

Code:

#menu ul
{margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}

#menu li
{float: left;
padding: 0px;
background-color: #796858;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
}

#menu li a
{display: block;
width: 226px;
color: #FFFFFF; /* couleur du texte */
padding: 5px;
text-decoration: none;
}

#menu li a:hover /* couleur du texte au passage de la souris */
{color: #70521A;}

#menu ul li ul  /* cacher les sous-catégories */
{display: none;}

#menu ul li:hover ul
{display: block;}

#menu li:hover ul li
{float: none;}

#menu li ul
{position:absolute;}

Par contre du coup ça arrondi aussi les autres cases en dessous. C'est pas grave ?
Si tu le veux que sur les 4 cases principales, je sais pas du tout >w<

Nan c'est exactement ça que je veux en faite !!!!
Je vais tester ça ^^

EDIT : c'est MERVEILLEUX !!! Mille fois merci !!!
Cette fois c'est bon, sujet classé x)

Avec grand plaisir ^^