Question

当我在此菜单旁边添加图像时，子菜单没有显示。

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

检查下面的屏幕截图。

可能出现什么问题？

Answer 1

向z-index添加更多#menu。像这样：

#menu{
   z-index:200;
}

Answer 2

内容进入滚动状态。

我猜测，您正在使用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>

Answer 3

尝试使用bootstrap网格系统

脚本文件..

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

Html代码

https.use.cached.ssl.context=false

为什么我的CSS-3菜单没有显示子菜单？

3 个答案: