个人中心
gpt4 book ai didi

html - 固定位置后无法点击下拉菜单

转载 作者：行者123 更新时间：2023-11-28 00:41:40 25 4
gpt4 key购买 nike

我一直在尝试制作一个固定下拉菜单，这样当您滚动时您仍然可以访问菜单及其内容。但是在将导航栏位置设置为固定后，我页面上的所有其他内容都会与其重叠并使其无法点击。我的设置完全搞砸了吗？我在下面提供的代码中缺少什么？

我的代码如下

body {
  background-image: url(../images/sabr.jpeg);
  background-size: cover;
  font-family: 'Times New Roman', Times, serif;
}


/*This section is for
  the Nav Menu */

ul {
  margin: 15px 10px;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 35px;
  line-height: 15px;
  text-align: center;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  border-color: #21618C;
  color: #DEA651;
}

ul li ul a {
  text-align: center;
}

ul li ul li {
  display: none;
}

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

ul li a:hover {
  border-style: groove;
  border-radius: 4px;
}

nav h3 {
  float: left;
  margin: 10px;
  padding: 0px 10px;
}

nav h3 a:visited {
  color: #DEA651;
}


/*This Section is for the CSS Grid Layout*/

#container {
  display: grid;
  grid-template-areas: 'nav nav nav' 'lit main side1' 'lit main side2' 'lit main side3' 'foot foot foot';
  grid-template-columns: .5fr 2fr .5fr;
  grid-gap: 20px 20px;
  text-align: center;
}

#nav {
  margin: 0px 0px 80px px;
  text-decoration: underline;
  color: #DEA651;
  height: 30px;
  padding: 5px 5px 5px 5px;
  width: 100%;
  background-color: #012C25;
  border-radius: 0px 5px;
  border-bottom-style: groove;
  border-bottom-color: #21618C;
  grid-area: nav;
  position: fixed;
  top: 0;
}

#main {
  grid-area: main;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

#aboutSidebar {
  grid-area: side1;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

#aboutSidebar h2 {
  text-align: center;
  background-color: aliceblue;
  border-radius: 7.5px;
  color: black;
}

#videoSidebar {
  grid-area: side2;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}

#wokeSidebar {
  grid-area: side3;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}

#litSidebar {
  grid-area: lit;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

footer {
  grid-area: foot;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}
<!doctype html>
<html>

<head>
  <title>Sabr Thru It</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="sabrcss/mobilestyle.css" />
  <link type="text/css" rel="stylesheet" href="sabrcss/sabrstyle1.css" media="all">
</head>
<div id="container">

  <body>
    <nav id="nav" class="slist">
      <h3><a href="index.html">SabrThruIt</a></h3>
      <ul>
        <li><a href="first.html">Home</a></li>
        <li><a href="wokeweapons/wokeweaps.html">Woke Weaps</a>
          <ul>
            <li><a href="#">Espresso</a></li>
          </ul>
        </li>
        <li><a href="#">Poetry</a>
          <ul>
            <li><a href="#">Inspirational</a></li>
            <li><a href="#">Melancholy</a></li>
            <li><a href="#">SabrSpecial</a></li>
          </ul>
        </li>
        <li><a href="#">Galleries</a>
          <ul>
            <li><a href="#">Muggle Struggle</a></li>
            <li><a href="#">Meme Museum</a></li>
            <li><a href="#">Carpe Noctem</a></li>
          </ul>
        </li>
        <li><a href="#">Success Stories</a>
          <ul>
            <li><a href="#">Past</a></li>
            <li><a href="#">Present</a></li>
            <li><a href="#">Up & Coming</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <section id="main">
      <h2>Latest Success Story</h2>
    </section>
    <aside id="aboutSidebar">
      <h2>What It's All About</h2>
      <p>
        One persons struggle trying to understand another persons success to keep the cycle of stress behind us and a sense of community always around of us.
      </p>
    </aside>
    <aside id="wokeSidebar">
      <h2>Daily Dose of Espresso</h2>
      <p>This Weeks Dose</p>
    </aside>
    <aside id="videoSidebar">
      <h2>The Latest Video</h2>
      <p>
        <iframe width="200" height="220" src="https://www.youtube.com/embed/nhcDl3S5sXQ?start=165" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </p>
      <p>Nipsey Hustle-Hussle&Motivate</p>
    </aside>
    <aside id="litSidebar">
      <h2>Read and React</h2>
    </aside>
    <footer>
      <h2>Contact Info</h2>
    </footer>
</div>
<script src="jscripts/sabrjs.js"></script>
</body>

</html>

最佳答案

您需要将 z-index 添加到 nav 以便它可以点击，并对工作下拉菜单进行一些 css 更改

body {
  background-image: url(../images/sabr.jpeg);
  background-size: cover;
  font-family: 'Times New Roman', Times, serif;
}


/*This section is for
  the Nav Menu */

ul {
  margin: 15px 10px;
  padding: 0px;
  list-style: none;
}

ul > li {
  float: left;
  width: 200px;
  height: 35px;
  line-height: 15px;
  text-align: center;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  border-color: #21618C;
  color: #DEA651;
}

ul li ul a {
  text-align: center;
}

ul li ul {
  display: none;
  background: #ffff00;
  width: 200px;
}

ul li:hover ul {
  display: block;
}

ul li ul li{
  display: inline-block;
  float:none;
}

ul li ul li a{
  color:#000000;
}


nav h3 {
  float: left;
  margin: 10px;
  padding: 0px 10px;
}

nav h3 a:visited {
  color: #DEA651;
}


/*This Section is for the CSS Grid Layout*/

#container {
  display: grid;
  grid-template-areas: 'nav nav nav' 'lit main side1' 'lit main side2' 'lit main side3' 'foot foot foot';
  grid-template-columns: .5fr 2fr .5fr;
  grid-gap: 20px 20px;
  text-align: center;
}

#nav {
  margin: 0px 0px 80px px;
  text-decoration: underline;
  color: #DEA651;
  height: 30px;
  padding: 5px 5px 5px 5px;
  width: 100%;
  background-color: #012C25;
  border-radius: 0px 5px;
  border-bottom-style: groove;
  border-bottom-color: #21618C;
  grid-area: nav;
  position: fixed;
  top: 0;
  z-index:9;
}

#main {
  grid-area: main;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

#aboutSidebar {
  grid-area: side1;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

#aboutSidebar h2 {
  text-align: center;
  background-color: aliceblue;
  border-radius: 7.5px;
  color: black;
}

#videoSidebar {
  grid-area: side2;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}

#wokeSidebar {
  grid-area: side3;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}

#litSidebar {
  grid-area: lit;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
  margin-top: 10px;
}

footer {
  grid-area: foot;
  background-color: aliceblue;
  border-radius: 7.5px;
  opacity: .5;
  border-style: inset;
  border-color: black;
}
<!doctype html>
<html>

<head>
  <title>Sabr Thru It</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="sabrcss/mobilestyle.css" />
  <link type="text/css" rel="stylesheet" href="sabrcss/sabrstyle1.css" media="all">
</head>
<div id="container">

  <body>
    <nav id="nav" class="slist">
      <h3><a href="index.html">SabrThruIt</a></h3>
      <ul>
        <li><a href="first.html">Home</a></li>
        <li><a href="wokeweapons/wokeweaps.html">Woke Weaps</a>
          <ul>
            <li><a href="#">Espresso</a></li>
          </ul>
        </li>
        <li><a href="#">Poetry</a>
          <ul>
            <li><a href="#">Inspirational</a></li>
            <li><a href="#">Melancholy</a></li>
            <li><a href="#">SabrSpecial</a></li>
          </ul>
        </li>
        <li><a href="#">Galleries</a>
          <ul>
            <li><a href="#">Muggle Struggle</a></li>
            <li><a href="#">Meme Museum</a></li>
            <li><a href="#">Carpe Noctem</a></li>
          </ul>
        </li>
        <li><a href="#">Success Stories</a>
          <ul>
            <li><a href="#">Past</a></li>
            <li><a href="#">Present</a></li>
            <li><a href="#">Up & Coming</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <section id="main">
      <h2>Latest Success Story</h2>
    </section>
    <aside id="aboutSidebar">
      <h2>What It's All About</h2>
      <p>
        One persons struggle trying to understand another persons success to keep the cycle of stress behind us and a sense of community always around of us.
      </p>
    </aside>
    <aside id="wokeSidebar">
      <h2>Daily Dose of Espresso</h2>
      <p>This Weeks Dose</p>
    </aside>
    <aside id="videoSidebar">
      <h2>The Latest Video</h2>
      <p>
        <iframe width="200" height="220" src="https://www.youtube.com/embed/nhcDl3S5sXQ?start=165" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </p>
      <p>Nipsey Hustle-Hussle&Motivate</p>
    </aside>
    <aside id="litSidebar">
      <h2>Read and React</h2>
    </aside>
    <footer>
      <h2>Contact Info</h2>
    </footer>
</div>
<script src="jscripts/sabrjs.js"></script>
</body>

</html>

关于html - 固定位置后无法点击下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53808751/

25 4 0
文章推荐： python - 无法使用 BeautifulSoup、urllib、selenium 提取完整的 HTML
文章推荐： c++ - 使用 std::regex 匹配 BOL 和 EOL
文章推荐： html - Angular TextArea 行为绑定(bind)到 Ctrl-Enter 键
文章推荐： javascript - 使 three.js 脚本固定在可滚动页面中