导航下的滑块？

Question

我是这个论坛和编码的新手。由于这是我的第一个网站，我所学到的只是来自这个论坛和youtube。我试图为自己制作尽可能简单的网站。我在最后，我有滑块的问题。

我的导航工作也是如此。我把滑块放在<header>中，因为如果我把它放在</header>之后它就不起作用了。你能帮帮我吗，我该怎么办？

我现在也有导航问题，下拉菜单不起作用（因为它可能在标题中）。我创建了一个响应式网站，所以我在@media中也有滑块问题。

祝你有愉快的一天！

＆＃13;

＆＃13;

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/*SLIDER*/
var index = 1;

function plusIndex(n) {
  index = index + n;
  showImage(index);
}

showImage(1);

function showImage(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {
    index = 1
  };
  if (n < 1) {
    index = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[index - 1].style.display = "block";
}

autoSlide();

function autoSlide() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  if (index > x.length) {
    index = 1
  }
  x[index - 1].style.display = "block";
  index++;

  setTimeout(autoSlide, 10000);
}

＆＃13;

  /*slider */

#container {
  width: 940px;
  height: 470px;
  .border: 1px solid black;
  margin: 0 auto;
  position: relative;
  margin-top: 2%;
}

#container>img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

#container>.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  border: none;
  .border-radius: 25px;
  top: 200px;
  background: none;
  color: white;
  font-size: 40px;
  opacity: 0.5
}

#container>#btn1:hover {
  .box-shadow: 0px 0px 20px 0px black;
  color: white;
  opacity: 1;
}

#container>#btn2:hover {
  .box-shadow: -0px 0px 20px 0px black;
  color: white;
  opacity: 1;
}

#container>#btn2 {
  position: relative;
  float: right;
}


/*ZAČETEK */

body {
  background-color: #e6e6e6;
  color: #000302;
  font-size: 87%;
  font-family: Franklin Gothic;
  line-height: 1.5;
  text-align: left;
}


/*header naprej */

.home {
  height: 100%;
}


/*slika in text poravnana */

.logo {
  display: inline;
  vertical-align: middle;
  padding: 10px;
  .height: 150px;
  .width: 80px;
  margin-bottom: 10px;
  float: left;
  width: 100px;
  max-width: 100%;
}

.head_text {
  display: inline;
  margin: 0% 0% 0% 5%;
  .text-shadow: 1px 0 0 #00417A, 0 -1px 0 #00417A, 0 1px 0 #00417A, -1px 0 0 #00417A;
  font-size: 50px;
  font-family: Franklin Gothic Book;
}

h1 {
  font-size: 50px;
  color: #9FCD52;
}

h2 {
  color: #9FCD52;
  .font-family: Franklin Gothic Book;
}

P {
  margin: 1px;
}


/*NOV HEADER */

.active {
  color: #999
}


/* Hide the list item that contains the link that should open and close the topnav on small screens */

#nav li.button {
  display: none;
}

#nav {
  /*cel navigation */
  background-color: #00417A;
  .height: 40px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  .width: 960px;
  margin: 0 auto;
  text-align: left;
}

#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  position: relative;
  background-color: #00417A;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#nav ul li {
  display: inline-block;
  list-style: none;
}

#nav ul li:hover {
  background-color: #FFFFFF;
  /*BELA */
  .border-radius: 3px;
  .-moz-border-radius: 3px;
  .-webkit-border-radius: 3px;
}

#nav ul li img {
  vertical-align: middle;
  padding-left: 5px;
  width: auto;
}

#nav ul li a,
visited {
  /*text*/
  color: #9FCD52;
  display: block;
  padding: 10px;
  text-decoration: none;
  margin: 0 10px;
}

#nav ul li a:hover {
  color: #9FCD52;
  text-decoration: none;
  .border-radius: 5px;
  .-moz-border-radius: 5px;
  .-webkit-border-radius: 5px;
}

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

#nav ul ul {
  /*DROPDOWN */
  display: none;
  position: absolute;
  border-top: 0px;
  margin-left: ;
  min-width: 200px;
  border-radius: 3px 10px 0 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#nav ul ul li {
  display: block;
}

#nav ul ul li a,
visited {
  color: #9FCD52;
}

#nav ul ul li a:hover {
  color: #9FCD52;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #9FCD52;
}

a:hover,
a:active {
  background-color: #FFFFFF;
  .border-radius: 3px;
  .-moz-border-radius: 3px;
  .-webkit-border-radius: 3px;
}

.body {
  margin: 0 auto;
  width: 50%;
  clear: both;
}

.mainHeader img {
  width: 11%;
  height: auto;
  margin: 0 0;
}

.mainContent {
  line-height: 25px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  .overflow: hidden;
}

.content {
  width: 70%;
  float: left;
}

.topContent {
  background-color: #FFFFFF;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 3% 5%;
  margin-top: 2%;
  box-shadow: 10px 10px 5px grey;
}

.top-sidebar {
  width: 21%;
  float: left;
  background-color: #FFFFFF;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 2% 3%;
  margin: 1.5% 0 2% 3%;
  box-shadow: 10px 10px 5px grey;
}

.bottom-sidebar {
  width: 21%;
  float: left;
  background-color: #FFFFFF;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 2% 3%;
  margin: 0 0 2% 3%;
  box-shadow: 10px 10px 5px grey;
}

.mainFooter {
  width: 100%;
  height: 40px;
  float: left;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #00417A;
  margin: 2% 0 2% 0;
}

.mainFooter p {
  width: 92%;
  margin: 0.70% auto;
  color: grey;
}

.mainHeader {
  float: left;
  padding: 1% 0% 0% 0%;
}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width:1719px) {
  #nav li:not(:first-child) {
    display: none;
  }
  /* ce napises li:not(:first-child), bo prvi prikazan */
  #nav li.button {
    float: right;
    display: inline-block;
  }
  #nav ul li:hover(:first-child) {
    color: #333;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

@media screen and (max-width:1719px) {
  #nav ul.responsive {
    position: relative;
  }
  #nav ul.responsive li.button {
    position: absolute;
    right: 0;
    top: 0;
  }
  #nav ul.responsive li {
    float: none;
    display: inline;
  }
  #nav ul.responsive li a {
    display: block;
    text-align: left;
  }
  #nav li.button {
    display: button;
  }
  #nav ul li.dropdown .itemdown {
    /*POMEMBEN! ko gres z misko na submenuje, grejo dol, se vse premakne dol! */
    width: 100%;
    position: relative;
  }
  @media only screen and (min-width: 150px) and (max-width: 1000px) {
    .body {
      width: 90%;
      font-size: 95%
    }
    .mainHeader img {
      width: 11%;
      float: center;
      height: auto;
    }
    .mainHeader nav {
      /* navigation cel*/
      height: 100%;
    }
    .mainHeader nav ul {
      padding-left: 0;
    }
    .mainHeader nav ul li {
      width: 30%;
    }
    #nav {
      /*cel navigation */
      .height: 42px;
      /*!!!!popravi nujno, le začasno (dva bela sta ko približaš!!!!! */
      width: 100%;
      text-align: left;
    }
    #nav ul li:hover {
      background-color: #FFFFFF;
      /*BELA */
      .border-radius: 3px;
      .-moz-border-radius: 3px;
      .-webkit-border-radius: 3px;
      .height: 42px;
    }
    #nav ul ul {
      /*DROPDOWN */
      display: none;
      position: absolute;
      background-color: #00417A;
      border-top: 0px;
      margin-left: ;
      min-width: 200px;
      border-radius: 5px 10px 0 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }
    .mainContent {
      line-height: 28px;
    }
    .content {
      width: 100%;
      float: left;
      margin-top: 2%;
    }
    .topContent {
      margin-top: 2%;
    }
    .top-sidebar,
    .bottom-sidebar {
      width: 94%;
      padding: 2% 3%;
      margin: 2% 0 2% 0;
    }
    .mainFooter {
      width: 100%;
      .height: 40px;
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background-color: #00417A;
      margin: 2% 0 2% 0;
    }
    .mainFooter p {
      width: 92%;
      margin: 0.70% auto;
    }
  }

＆＃13;

<body class="body">

  <header class="mainHeader">
    <img src="logo5.png" alt="logo image" height="200" width="200" class="logo" />
    <h1 class="head_text">TITLE</h1>

    <div id="nav" class="topnav">
      <div>
        <ul id="myTopnav">
          <li>
            <a href="#"><img src="home.png" alt="home" class="home" /></a>
          </li>

          <li class="dropdown">
            <a href="#">ONE<img src="arrow.png"/></a>
            <ul class="itemdown">
              <li><a href="#">aaaaaaa</a></li>
              <li><a href="#">bbbbbbb</a></li>
              <li><a href="#">ccccccc</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#">TWO<img src="arrow.png"/></a>
            <ul class="itemdown">
              <li><a href="#">aaaaaaa</a></li>
              <li><a href="#">bbbbbbb</a></li>
              <li><a href="#">ccccccc</a></li>
              <li><a href="#">ddddddd</a></li>
              <li><a href="#">eeeeeee</a></li>
              <li><a href="#">fffffff</a></li>
              <li><a href="#">ggggggg</a></li>
            </ul>
          </li>
          <li><a href="#">THREE</a></li>
          <li><a href="#">FOUR</a></li>
          <li><a href="#">FIVE</a></li>
          <li class="dropdown">
            <a href="#">SIX <img src="arrow.png"/></a>
            <ul class="itemdown">
              <li><a href="#">aaaaaaa</a></li>
              <li><a href="#">bbbbbbb</a></li>
              <li><a href="#">ccccccc</a></li>
              <li><a href="#">ddddddd</a></li>
            </ul>
          </li>
          <li class="button">
            <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
          </li>
        </ul>
      </div>
    </div>

    <div id="container">
      <img class="slides" src="img/1.jpg" />
      <img class="slides" src="img/2.jpg" />
      <img class="slides" src="img/3.jpg" />
      <button class="btn" onclick="plusIndex(-1)" id="btn1"> &#10094; </button>
      <button class="btn" onclick="plusIndex(1)" id="btn2"> &#10095; </button>
    </div>



  </header>

  <div class="content">
    <article class="topContent">
      <header>
        <h2><a href="#" title="First post">Title2</a></h2>
      </header>

      <content>
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led.
          Power had these met least nor young. Yet match drift wrong his our. </p>
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led.
          Power had these met least nor young. Yet match drift wrong his our. </p>
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led.
          Power had these met least nor young. Yet match drift wrong his our. </p>
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led.
          Power had these met least nor young. Yet match drift wrong his our. </p>
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led.
          Power had these met least nor young. Yet match drift wrong his our. </p>
      </content>
    </article>
  </div>

  <aside class="top-sidebar">
    <article>
      <h2>Kontakt</h2>
      <p>
        <font size="4">hey hey</font>
      </p>
      <p>
        <font size="4" color="#9FCD52">E:</font>
        <font color="gray">hey1</font>
      </p>
      <p>
        <font size="4" color="#9FCD52">T:</font>
        <font color="gray">hey2</font>
      </p>
    </article>
  </aside>

  <aside class="bottom-sidebar">
    <article>
      <h2>Coments</h2>
      <p>all comments-slider</p>
    </article>
  </aside>
  </div>

  <footer class="mainFooter">
    <p>footer</p>

</body>

＆＃13;

＆＃13;

＆＃13;