html - 如何从后到前显示标签?
问题描述
我创建了一个菜单,在页面顶部有子菜单,在菜单下有一个幻灯片图像。
结果:请参考附加的图像文件:幻灯片图像后面显示子菜单:
如何移动子菜单显示幻灯片图像的前面?
这是我的顶级菜单的CSS:但如果我添加幻灯片图像,子菜单显示在后面。
{
margin: 0;
padding: 0;
}
#menu {
text-align: center;
padding: 10px;
}
#menu ul {
list-style-type: none;
text-align: center;
}
#menu li {
display: inline-block;
padding: 10px;
position: relative;
}
#menu a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
display: block;
font-size: 16px;
}
#menu a:hover {
color: #444;
}
.sub-menu {
display: none;
position: absolute;
}
.sub-menu li {
display: none;
margin-left: 0 !important;
white-space: nowrap;
}
.sub-menu li a {
display: none;
margin-left: 0 !important;
}
#menu li:hover .sub-menu {
display: block;
}
<header>
<div id="menu">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">Product</a>
<ul class="sub-menu">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="login">Login</a></li>
<li><a href="signup">SignUp</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<!-- display the slider -->
<div>
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="">
<li><img src="https://via.placeholder.com/1024x768" alt="1" title="1" />
</li>
</ul>
</div>
</div>
<!-- End -->
解决方案
试试这个
添加z-index: 100;
所以它的工作
.sub-menu {
z-index: 100;
}
{
margin: 0;
padding: 0;
}
#menu {
text-align: center;
padding: 10px;
}
#menu ul {
list-style-type: none;
text-align: center;
}
#menu li {
display: inline-block;
padding: 10px;
position: relative;
}
#menu a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
display: block;
font-size: 16px;
}
#menu a:hover {
color: #444;
}
.sub-menu {
display: none;
position: absolute;
z-index: 100;
}
.sub-menu li {
display: none;
margin-left: 0 !important;
white-space: nowrap;
}
.sub-menu li a {
display: none;
margin-left: 0 !important;
}
#menu li:hover .sub-menu {
display: block;
}
<body>
<header>
<div id="menu">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">Product</a>
<ul class="sub-menu">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="login">Login</a></li>
<li><a href="signup">SignUp</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<!-- display the slider -->
<div>
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="">
<li><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" alt="1" title="1" />
</li>
</ul>
</div>
</div>
<!-- End -->
</body>
推荐阅读
- hyperledger-fabric - Hyperledger Fabric 评估交易是否返回签名查询结果?
- javascript - Angular 11,子组件未从父组件接收嵌套 API 对象
- plotly - 情节:如何在情节右侧添加空间
- scheme - 方案语言升序
- c# - 查询未添加到表中
- memory - 关于 cpu 内存通道和主板内存通道/插槽的混淆
- java - 无法从元组实例化类
- javascript - 如何使用 Inertia Vue 更新 Laravel 会话数据?
- python - 什么是“DataFrame 对象没有属性 'ix'”错误?
- javascript - 如何使用 onMouseLeave React 撤消转换