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

时间：2018-12-17 03:53:29

标签： html css drop-down-menu dropdown

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

我的代码如下

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>

1 个答案:

答案 0 :(得分：0)

您需要将z-index添加到导航中，以便它可以单击并对工作下拉菜单进行一些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>

相关问题
最新问题