html - 如何在导航栏中的下拉菜单中删除透明度，使其仅使用 CSS 不显示其后面的页面文本

问题描述

我是编码新手，我的大学向我们提交了一项作业，我需要帮助transparency从drop-down menu. 当您向下滚动时，您可以看到后面的页面正文navbar。No opacity已设置。此外，当我使用透明导航栏向下滚动时，光标无法越过正文开始的位置。

感谢您的任何帮助！

我附上了 CSS 和 HTML 的代码片段：

body {
  background-color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  text-align: center;
}

ul {
  margin: 0%;
  padding: 0px;
  list-style: none;
  display: inline-block;
}

ul li {
  float: left;
  width: 300px;
  height: 35px;
  background-color: rgb(211, 211, 211);
  line-height: 35px;
  text-align: center;
  font-size: 18px;
}

ul li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  display: block;
}

ul li a:hover {
  background-color: rgb(180, 180, 180);
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

.html logo {
  height: auto;
  width: auto;
  max-width: 50px;
  max-height: 50px;
  padding-left: 2%;
}

.font-element {
  font-family: 'Courier New', Courier, monospace;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The &#60;b&#62; Element </title>
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <header>
    <a href="index.html"><img class="html logo" src="images/logo.png" alt="HTML&#38;CSS"></a>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a>HTML 5</a>
          <ul>
            <li><a href="belement.html">&#60;b&#62; Element</a></li>
            <li><a href="element2.html">Element 2</a></li>
            <li><a href="element3.html">Element 3</a></li>
            <li><a href="element4.html">Element 4</a></li>
            <li><a href="element5.html">Element 5</a></li>
            <li><a href="element6.html">Element 6</a></li>
            <li><a href="element7.html">Element 7</a></li>
            <li><a href="element8.html">Element 8</a></li>
            <li><a href="element9.html">Element 9</a></li>
            <li><a href="element10.html">Element 10</a></li>
          </ul>
        </li>
        <li><a>CSS</a>
          <ul>
            <li><a href="css1.html">CSS 1</a></li>
            <li><a href="css2.html">CSS 2</a></li>
            <li><a href="css3.html">CSS 3</a></li>
          </ul>
          <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <h1>The &#60;<span class="font-element">b</span>&#62; Element</h1>
  <p>The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names
    in a review, actionable words in interactive text-driven software, or an article lede.
    <h2>Example Code:</h2>
    This is some &#60;b&#62;really bold text &#60;&#47;b&#62;.
    <h2>The result:</h2>
    This is some <b>really bold text</b>.
    <p>You can find more information on the official W3C specification by clicking here.</p>
</body>

</html>

标签： htmlcss

html - 如何在导航栏中的下拉菜单中删除透明度，使其仅使用 CSS 不显示其后面的页面文本

问题描述

解决方案

推荐阅读