メニュー項目を水平表示で追加する

Question

私は垂直メニューバーを持っています（すべてのウェブサイトのように）...私は要素の1つに垂直サブメニューを追加したいと思います。

これは私が現在持っているものです。

Current Contact Menu

、これは私が欲しいものです：

Required Contact Menu

誰もがどのように私はこれを達成することができる任意のアイデアを持っていますか？注：私はテーブルを使ってみましたが、リストの背景には表示されず、透明なものが出ました！

UPDATE：

これは私が追加する揃える表...（私はコードが少し長いですごめんなさい）を含めたものです。

あなたがして、あなたの最後の部分（テーブル付きの箇条書き）を置き換えることができ

<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

：（ところで、あなたのコード内</li>を忘れてしまった）

<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> 

をして追加あなたのCSSスタイルシートに続く：

#submenu { 
    width: 130px; 
} 

#submenu ul { 
    width: 100%; 
} 

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

これは、私はあなたが達成したいと思う。明らかに、必要に応じて値を調整する必要があります。ここで

あなたは、これがどのように見えるかの例があります。 http://jsfiddle.net/ramsesoriginal/4ML6G/

編集：私はあなたが取得したい（と私のコードを取得している）と思った何 です：

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

jsfiddle（http://jsfiddle.net/ramsesoriginal/4ML6G/）を見ると、そのように見えます。違うものを手に入れようとしていますか？