Ajout d'éléments de menu en affichage horizontal

Question

J'ai une barre de menu verticale (comme tout site web) ... Je veux ajouter un sous-menu vertical dans l'un des éléments.

C'est ce que j'ai actuellement:

Current Contact Menu

et voici ce que je veux:

Required Contact Menu

quelqu'un a une idée comment puis-je y parvenir? NOTE: J'ai essayé d'utiliser des tables mais ça ne s'est pas montré avec l'arrière-plan de la liste et j'en ai sorti une transparente!

MISE À JOUR:

Voici ce que j'ai compris le tableau I rectifiées à ajouter ... (Je suis désolé que le code est un peu long).

<ul> 
    <li><a href="index.html">HOME</a></li> 
    <li><a href="about.html">PAGES</a> 
     <ul> 
      <li><a href="about.html">About Page</a></li> 
      <li><a href="page-left-sidebar.html">Page with Left Sidebar</a></li> 
      <li><a href="page-right-sidebar.html">Page with Right Sidebar</a></li> 
      <li><a href="page-full-width.html">Full-width Page</a></li> 
      <li><a href="faq.html">F.A.Q</a></li> 
     </ul> 
    </li> 
    <li><a href="typography.html">TYPOGRAPHY</a> 
     <ul> 
      <li><a href="typography.html#Heading">Heading Tags</a></li> 
      <li><a href="typography.html#Column">Column Styles</a></li> 
      <li><a href="typography.html#Highlight">Highlights</a></li> 
      <li><a href="typography.html#List">List Styles</a></li> 
      <li><a href="typography.html#Block">Blockquotes</a></li> 
      <li><a href="typography.html#Image">Image Placement</a></li> 
     </ul> 
    </li> 
    <li><a href="porto-3cols.html">PORTOFOLIO</a> 
     <ul> 
      <li><a href="porto-2cols.html">Porto - 2 Columns</a></li> 
      <li><a href="porto-3cols.html">Porto - 3 Columns</a></li> 
      <li><a href="porto-4cols.html">Porto - 4 Columns</a></li> 
     </ul> 
    </li> 
    <li><a href="shortcodes.html">SHORTCODES</a> 
     <ul> 
      <li><a href="shortcodes.html#Toggle">Toggle</a></li> 
      <li><a href="shortcodes.html#Tabbed">Content Tabs</a></li> 
      <li><a href="shortcodes.html#Caption">Image Caption</a></li> 
      <li><a href="#">Sample Submenu</a> 
       <ul> 
        <li><a href="#">Sample 01</a></li> 
        <li><a href="#">Sample 02</a></li> 
        <li><a href="#">Sample 03</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="blog.html">BLOG</a></li> 
    <li><a href="contact.php">CONTACT</a> 
    <ul> 
     <li><a href="porto-2cols.html"><img src="pix/portopix/porto_3cols_09.jpg" alt="Sample Image" />ASD</a></li> 
     <li> 
      <table style="background:inherit"> 
       <tr> 
        <td>asd</td> 
        <td>asd</td> 
       </tr> 
      </table> 
     </li> 
    </ul> 
</ul> 

Answer 1

Vous pouvez remplacer votre dernière partie (le point de balle avec la table) avec:

<ul> 
    <li><a href="porto-2cols.html"><img src="pix/portopix/porto_3cols_09.jpg" alt="Sample Image" />ASD</a> 
     <div id="submenu"> 
      <h3>Title</h3> 
      <ul> 
       <li> first </li> 
       <li> second </li> 
       <li> third </li> 
       <li> fourth</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

(Soit dit en passant, vous avez oublié un </li> dans votre code)

et ajoutez la suivant à votre feuille de style CSS:

#submenu { 
    width: 130px; 
} 

#submenu ul { 
    width: 100%; 
} 

#submenu li{ 
    width: 50px; 
    display: inline-block; 
} 

qui produirait un effet similaire à Je suppose que vous voulez atteindre. Il va de soi que vous devrez ajuster les valeurs en fonction de vos besoins.

Ici vous avez un exemple de la façon dont cela pourrait ressembler: http://jsfiddle.net/ramsesoriginal/4ML6G/

Edit: Ce que je pensais que vous voulez obtenir (et obtenez avec mon code) est:

+------------------+ 
|     | 
+---+--------------+ 
    |    | 
    +--------------+ 
    |    | 
    +--------------+ 
    |    | 
+------------------+ 
|     | 
+---+--------------+ 
    |    | 
    +--------------+ 
    |    | 
+------------------+ 
|     | 
+---+--------------+ 
    |    | 
    +--------------+ 
    |    | 
    | +---+ +---+ | 
    | +---+ +---+ | 
    | +---+ +---+ | 
    | +---+ +---+ | 
    +--------------+ 

Si vous regardez le jsfiddle (http://jsfiddle.net/ramsesoriginal/4ML6G/), vous verrez que c'est comme ça. Est-ce que vous essayez d'obtenir quelque chose de différent?