为什么我的CSS-3菜单不显示子菜单？
为什么我的CSS-3菜单不显示子菜单？
提问于 2016-06-22 12:44:32
我正在使用this vertical menu。
当我在此菜单旁边添加图像时，子菜单没有显示。
<nav id="menu"></nav><img src="1.jpg">检查下面的屏幕截图。
会出什么问题呢？
回答 3
Stack Overflow用户
发布于 2016-06-22 13:11:45
向您的#menu添加更多z-index。如下所示：
#menu{
z-index:200;
}Stack Overflow用户
发布于 2016-06-22 13:44:52
内容会进入卷轴。
我猜你是在用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 & 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 & 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&C</a></li>
</ul>
</li>
</ul>
</nav>
<div style="height:100px;width:200px;background:red;float: left;margin-left: -200px;"></div>Stack Overflow用户
发布于 2016-06-22 13:43:58
尝试使用bootstrap网格系统
脚本文件..
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37958723
复制相关文章
相似问题
腾讯云开发者
