旋转木马后面的导航栏出现问题。我知道这是重复的,我似乎无法找到解决问题的方法。我厌倦了使用 z-index: 1000 没有运气。我为上述问题添加了 html 和 css 文件。你还想要什么 ttt frooom meeee。
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* Unordered list*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Header **/
header {
opacity: .8;
background-color: #000;
max-height: 55px;
}
/* list items */
header li {
float: left;
color: blue;
padding: 10px 10px 0 10px;
text-align: center;
}
.nav-items ul li ul li {
float: none;
}
.nav-items ul li ul {
position: absolute;
z-index: 1000;
visibility: visible;
}
.nav-items a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: block;
}
header a:hover {
background-color: red;
}
header ul li:hover ul li {
display: block;
}
header ul li ul li {
display: none;
}
header #branding {
float: left;
padding-right: 50px;
}
header #branding h2 {
margin: 0;
color: #fff
}
header .highlight {
color: #99c2ff;
font-weight: bold;
}
header .action-items {
float: right;
}
/* Carousel css file */
.carousel-inner img {
margin: 0 auto;
display: block;
}
<header>
<div class="container">
<div id="branding">
<h2><span class="highlight">Connect</span>Us</h2>
</div>
<nav class="nav-items">
<ul>
<li><a href="index.html">Private Services</a>
<ul>
<li><a> Service 1 </a></li>
<li><a> Service 2 </a></li>
</ul>
</li>
<li><a href="index.html">Assesment</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<nav class="action-items">
<ul>
<li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</nav>
</div>
</header>
This is the html file above
最佳答案
让它为你工作。问题是您在同一个导航栏中有“私有(private)服务”、“服务 1”和“服务 2”。整个导航设置为 z-index:1000,这意味着“服务”以及“服务 1 和 2”的下拉选项都在同一个 z-index 中。
此代码将“服务 1 和服务 2”设置为比“私有(private)服务”更高的层。下拉选项现在可见。
.dd {
position: absolute;
z-index: 100111;
visibility: visible;
}
-
<nav class="nav-items">
<ul>
<li><a href="index.html">Private Services</a><dropdown class="dd">
<ul>
<li><a> Service 1 </a></li>
<li><a> Service 2 </a></li>
</ul></dropdown>
完整代码:
<style>/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* Unordered list*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Header **/
header {
opacity: .8;
background-color: #000;
max-height: 55px;
}
/* list items */
header li {
float: left;
color: blue;
padding: 10px 10px 0 10px;
text-align: center;
}
.nav-items ul li ul li {
float: none;
}
.nav-items ul li ul {
position: absolute;
z-index: 1000;
visibility: visible;
}
.dd {
position: absolute;
z-index: 100111;
visibility: visible;
}
.nav-items a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: block;
}
header a:hover {
background-color: red;
}
header ul li:hover ul li {
display: block;
}
header ul li ul li {
display: none;
}
header #branding {
float: left;
padding-right: 50px;
}
header #branding h2 {
margin: 0;
color: #fff
}
header .highlight {
color: #99c2ff;
font-weight: bold;
}
header .action-items {
float: right;
}
/* Carousel css file */
.carousel-inner img {
margin: 0 auto;
display: block;
}</style>
<header>
<div class="container">
<div id="branding">
<h2><span class="highlight">Connect</span>Us</h2>
</div>
<nav class="nav-items">
<ul>
<li><a href="index.html">Private Services</a><dropdown class="dd">
<ul>
<li><a> Service 1 </a></li>
<li><a> Service 2 </a></li>
</ul></dropdown>
</li>
<li><a href="index.html">Assesment</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<nav class="action-items">
<ul>
<li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</nav>
</div>
</header>
关于html - 下拉轮播后面的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48199206/