为什么我不能将鼠标悬停在导航栏上并单击任何内容？我希望透明导航栏在我悬停时滑动更多条形图。有任何想法吗？看起来我的导航栏在背景图像后面，如果我在背景周围改变它就会开始分崩离析。我只是一个初学者，不要生气。另外如果我想在右上角登录图标或熟悉我应该怎么做，你如何在导航栏之间留出空间？
body, html {
height: 100%;
margin:0;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3 {
position: relative;
opacity: 0.7;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url("https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
min-height: 100%;
}
.pimg2 {
background-image: url("street.jpg");
min-height: 400px;
}
.pimg3 {
background-image: url("aus.jpg");
min-height: 400px;
}
.section {
text-align: center;
padding:50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-light {
background-color: #282e34;
color:#ddd;
}
.ptext {
position: absolute;
top:50%;
width: 100%;
text-align: center;
color:#000;
font-size:27px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
.ptext .border-trans {
background-color: transparent;
}
@media(max-width: 568px) {
.pimg1,.pimg2,.pimg3 {
background-attachment: scroll;
}
}
a {
text-decoration: none;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
ul li {
float:left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size:20px;
}
ul li a {
text-decoration: none;
color: white;
display:block;
}
ul li a:hover {
background-color: blue;
}
ul li ul li {
display:none;
}
ul li:hover ul li {
display :block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paralex website demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html"><img class="icon" src="5.jpg"></a></li>
<li><a>Components</a>
<ul>
<li><a href="/videocards.html/">Video Cards</a></li>
<li><a>Displays</a></li>
<li><a>Cpu</a></li>
<li><a>Ram</a></li>
<li><a>Cooling System</a></li>
</ul>
</li>
<li><a>Pre Built Computers</a>
<ul>
<li><a>Laptop Computers</a></li>
<li><a>Desktop Computers</a></li>
</ul>
</li>
<li><a>Contacts</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Beginners Website
</span>
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae suscipit harum nisi dolore nesciunt labore eaque aliquid ab obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border-trans">
Image 2 text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section one</h2>
<p>
Lorem, ipsum do obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border-trans">
Image 3 text
</span>
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>Lorem, ipsum dde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Beginners Website
</span>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
添加此款式
nav {
position: relative;
z-index: 1;
}
同时更改li
的背景颜色ul li {
background-color: transparent;
}
你的pimg1 div覆盖了nav元素，因为它是相对的。您还需要在positon: relative元素上设置nav，并将z-index的任何值设置为高于0.它应该有效。
body, html {
height: 100%;
margin:0;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
nav {
position: relative;
z-index: 1;
}
.pimg1, .pimg2, .pimg3 {
position: relative;
opacity: 0.7;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url("https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
min-height: 100%;
}
.pimg2 {
background-image: url("street.jpg");
min-height: 400px;
}
.pimg3 {
background-image: url("aus.jpg");
min-height: 400px;
}
.section {
text-align: center;
padding:50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-light {
background-color: #282e34;
color:#ddd;
}
.ptext {
position: absolute;
top:50%;
width: 100%;
text-align: center;
color:#000;
font-size:27px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
.ptext .border-trans {
background-color: transparent;
}
@media(max-width: 568px) {
.pimg1,.pimg2,.pimg3 {
background-attachment: scroll;
}
}
a {
text-decoration: none;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
ul li {
float:left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size:20px;
}
ul li a {
text-decoration: none;
color: white;
display:block;
}
ul li a:hover {
background-color: blue;
}
ul li ul li {
display:none;
}
ul li:hover ul li {
display :block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paralex website demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html"><img class="icon" src="5.jpg"></a></li>
<li><a>Components</a>
<ul>
<li><a href="/videocards.html/">Video Cards</a></li>
<li><a>Displays</a></li>
<li><a>Cpu</a></li>
<li><a>Ram</a></li>
<li><a>Cooling System</a></li>
</ul>
</li>
<li><a>Pre Built Computers</a>
<ul>
<li><a>Laptop Computers</a></li>
<li><a>Desktop Computers</a></li>
</ul>
</li>
<li><a>Contacts</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Beginners Website
</span>
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae suscipit harum nisi dolore nesciunt labore eaque aliquid ab obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border-trans">
Image 2 text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section one</h2>
<p>
Lorem, ipsum do obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border-trans">
Image 3 text
</span>
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>Lorem, ipsum dde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Beginners Website
</span>
</div>
</div>
</body>
</html>