CSS-3メニューにサブメニューが表示されないのはなぜですか？

Question

私はthis vertical menuを使用しています。

このメニューの横に画像を追加すると、サブメニューが表示されませんでした。

<nav id="menu"></nav><img src="1.jpg"> 

以下の画面キャプチャを確認してください。

何が間違って行くことだろうか？

Answer 1

さらにz-indexを#menuに追加してください。このように：

#menu{ 
    z-index:200; 
} 

Answer 2

ブートストラップグリッドシステム

スクリプトファイルを使用してみてください。..

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

HTMLコード

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-6"> 

       //put your menu code here... 

      </div> 
      <div class="col-sm-6"> 

       // put your image here... 

      </div> 
     </div> 
</div> 

Answer 3

コンテンツがスクロールに入りました。

私は、floatを使用してメニューを左に、イメージを横にしていると推測しています。 floatを追加すると、オブジェクトはページ全体に柔軟性を失い、ブロック要素になります。

これを試してください。

#menu { 
    overflow: auto; 
    position: relative; 
    z-index: 2; 
    float: left; 
    width: 400px; 
} 


<h3>CSS3 Vertical Menu With Sub Menus</h3> 

    <nav id="menu"> 
     <ul class="parent-menu"> 
      <li><a href="#">Home &amp; Kitchen</a> 
       <ul> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Electronics</a> 
       <ul> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
       </ul></li> 
      <li><a href="#">Clothing</a> 
       <ul> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
       </ul></li> 
      <li><a href="#">Cars &amp; Motorbikes</a> 
       <ul> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Books</a> 
       <ul> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
        <li><a href="#">item</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Support</a> 
       <ul> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Forum</a></li> 
        <li><a href="#">Deliveries</a></li> 
        <li><a href="#">T&amp;C</a></li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 
<div style="height:100px;width:200px;background:red;float: left;margin-left: -200px;"></div>