2017-05-04 22 views
-4

私はナビゲーションバーにいくつかの問題があるので、私は非常に助けが必要です。私のボタンの1つはドロップダウンですが、私のドロップダウンの内容はnavの中に詰まっていて、その下にドロップしたいと思っています。同じコードの異なるHTMLページは全く異なって見える

var myIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    if (myIndex > x.length) { 
 
    myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 4000); // Change image every 2 seconds 
 
}
.topnav { 
 
    background-color: #ffffff; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    margin-top: -10%; 
 
    margin-left: -1%; 
 
    margin-bottom: 10%; 
 
    width: 110%; 
 
    padding-bottom: -3%; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 10; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #000000; 
 
    text-align: center; 
 
    padding: 50px 50px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
} 
 

 
.topnav a:hover { 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    color: #ff3385; 
 
    text-decoration: underline #ff3385; 
 
    font-size: 30px; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) { 
 
    display: none; 
 
    } 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 

 
/* 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 (display the links vertically instead of horizontally) */ 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive { 
 
    position: relative; 
 
    } 
 
    .topnav.responsive a.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    display: list-item; 
 
    margin text-align: center; 
 
    text-decoration: none; 
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    background-color: inherit; 
 
    position: fixed: 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: white; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 100; 
 
    margin-top: 25%; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.logo { 
 
    margin-top: 10%; 
 
    margin-bottom: -0.75%; 
 
    margin-left: 10%; 
 
    padding-top: 25px; 
 
    position: relative; 
 
} 
 

 
.mySlides { 
 
    display: none; 
 
    position: absolute; 
 
    margin-left: -9.5%; 
 
    margin-top: -27.1%; 
 
    margin-right: 10%; 
 
} 
 

 
.h1 { 
 
    font-size: 300%; 
 
    letter-spacing: -1px; 
 
    text-align: center; 
 
    padding-top: 1.5%; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
} 
 

 
h2 { 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    font-size: 300%; 
 
    letter-spacing: 0px; 
 
    line-height: 150%; 
 
    text-align: center; 
 
    text-decoration: underline #ff3385; 
 
    color: #ff3385; 
 
} 
 

 
p { 
 
    font-size: 150%; 
 
    letter-spacing: 0px; 
 
    line-height: 150%; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
} 
 

 
.møbler { 
 
    padding: 1%; 
 
    margin-left: 4%; 
 
    margin-bottom: 10%; 
 
    float: left; 
 
} 
 

 
footer { 
 
    color: black; 
 
    background-color: #f1f1f1; 
 
    clear: left; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    font-size: 15px; 
 
    line-height: 200%; 
 
    margin-left: 2%; 
 
}
<html> 
 

 
<head> 
 
    <title>Herningmøbelengros.dk</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="Mastercss.css" /> 
 
    <script src="newjavascript.js" type="text/javascript"></script> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
</head> 
 

 
<body bgcolor="#f5f5f0"> 
 
    <header> 
 
    <nav> 
 
     <div class="topnav" id="myTopnav"> 
 
     <a href="index.html">Hjem</a> 
 
     <a href="side 2.html" class="icon" onclick="myFunction()">&#9776;</a> 
 
     <li class="dropdown"> 
 
      <a href="javascript:void(0)" class="dropbtn">Møbler</a> 
 
      <div class="dropdown-content"> 
 
      <a href="#">Borde</a> 
 
      <a href="#">Stole</a> 
 
      <a href="#">Skabe</a> 
 
      </div> 
 
     </li> 
 
     <a href="side 3.html">Om os</a> 
 
     </div> 
 
    </nav> 
 
    </header> 
 

 

 

 

 

 
    <div class="logo"> 
 
    <img src="LOGO.PNG" alt="Herning Bolig engros møbler" align="center" style="width:30%" /> 
 
    </div> 
 

 
    <section> 
 
    <div class="w3-content w3-section" style="max-width:100px"> 
 
     <img class="mySlides" src="førsøgsbillede.jpg" style="width:53.3%" /> 
 
     <img class="mySlides" src="førsøgsbillede 2.jpg" style="width:53.3%" /> 
 
     <img class="mySlides" src="førsøgsbillede 3.jpg" style="width:53.3%" /> 
 
    </div> 
 
    </section> 
 

 

 
    <h1 class="h1">Køb stort - betal småt</h1> 
 

 

 

 
    <hr> 
 
    <footer> 
 
    <div style='float:left; width:30%'> 
 
     <strong>Kontakt</strong> <br>Telf: +45 21 42 28 99<br> Email:[email protected] 
 
    </div> 
 
    <div style='float:left; width:30%; margin-left:30px'> 
 
     <strong>Lokation</strong> <br>Find os på Industrivej Syd 1B<br> 7400 Herning 
 
    </div> 
 
    <div style='float:left; width:30%; margin-left:30px'> 
 
     <strong>Åbningstider</strong> <br>Ons-fre 10.00-17.00<br> Lør-søn 10.00-16.00 
 
    </div> 
 
    </footer> 
 
</body> 
 

 
</html>

+1

私はあなたの問題が実際に何かを明確にする必要があると思います。 – Carcigenicate

+4

最後の分まであなたが宿題をしなかったという事実は、SOとは無関係です。答えはあなたのスケジュールではなく、来るときに来るでしょう。 https://meta.stackoverflow.com/q/334822/215552を参照してください。 –

答えて

0

あなたは、先行する<ul>要素なし<li>要素を持っています。それは私があなたのnavメニューについて本当に気づいた最初のことです。たくさんのインラインスタイルもありますが、外部のCSSドキュメントもありますか? HTMLとCSSの基本的な構文についていくつかの研究をする必要があるようです。あなたはW3 Schoolsスタイルシートにリンクしているので、あなたはそのサイトに精通していると思います。 Googleを使用し、HTMLとCSSで適切なドロップダウンメニューを作成する方法を検索してください。私はそれが最初の2つまたは3つの結果の1つになることを保証します。スタックオーバーフローは、すでに少しの研究をしていて、何をしようとしているのかの答えを得ることができないときに本当に使用されるべきです。

関連する問題