Warum sind meine Dropdown-Elemente links von meinen Tasten nicht darunter?

Question

Ich versuche, Drop-Down-Menüs unter den verschiedenen Kategorien zu erstellen, aber wenn ich den Mauszeiger darüber bewege, erscheint das Dropdown-Menü links neben der Schaltfläche. Irgendwelche Vorschläge zur Behebung? Link zu meinem Code unten

Hier jsFiddle Link:

body { 
 
    margin: 0px; 
 
    overflow-x: hidden; 
 
} 
 

 
.content { 
 
    font-family: verdana; 
 
    font-size: 30px; 
 
} 
 

 
.donate { 
 
    background-color: orange; 
 
    border: white; 
 
    color: rgb(255, 255, 255); 
 
    padding: 7px 14px; 
 
    font-size: 15px; 
 
    border-radius: 8px; 
 
} 
 

 
.donate:hover { 
 
    background-color: rgb(102, 51, 0); 
 
    color: rgb(255, 255, 255); 
 
} 
 

 
.divnav { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropbtn { 
 
    font-size: 13px; 
 
    border: none; 
 
    outline: none; 
 
    background-color: inherit; 
 
    float: right; 
 
    display: block; 
 
    margin: 3px 3px 3px 3px; 
 
    font-family: verdana; 
 
    font-weight: 550; 
 
} 
 

 
.dropbtn:hover { 
 
    color: orange; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    overflow: auto; 
 
} 
 

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

 
html {} 
 

 
.image { 
 
    overflow: hidden; 
 
} 
 

 
.navbar { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 

 
.navelement { 
 
    float: right; 
 
    display: block; 
 
    margin: 3px 3px 3px 3px; 
 
    font-family: verdana; 
 
    font-size: 13px; 
 
    font-weight: 550; 
 
} 
 

 
.nava { 
 
    padding: 5px; 
 
} 
 

 
.nava:hover { 
 
    background-color: white; 
 
    color: orange; 
 
} 
 

 
.pagetitle { 
 
    height: 68px; 
 
    width: 100%; 
 
    background-image: url("pictures/titlebar1.jpg"); 
 
} 
 

 
.par { 
 
    /* DIV THAT GOES UNDER TODOCONTENT ONLY AND MARKS A PARAGRAPH WITH INFORMATIVE CONTENT*/ 
 
} 
 

 
.parcontent { 
 
    font-family: verdana; 
 
    color: rgb(150, 150, 150); 
 
    font-size: 15px; 
 
} 
 

 
.titleimage { 
 
    overflow: hidden; 
 
    height: 310px; 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 

 
.title { 
 
    font-family: verdana; 
 
    font-size: 50px; 
 
    color: white; 
 
} 
 

 
.todocontent { 
 
    width: 47%; 
 
    /* A DIV WITH CLASS TODOCONTENT MEANS A DIV THAT WILL CONTAIN ALL INFORMATIVE CONTENT OF THE PAGE*/ 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    height: 5%; 
 
    overflow: hidden; 
 
}

<div class="titleimage"> 
 
    <img src="C:\Users\kiran.nair\Desktop\Internship\current\pictures\heading2.jpg" alt="GLI.logo" style="width:100%;height:100%;"> 
 
</div> 
 
<div class="divnav"> 
 
    <div class="wrapper" style="POSITION: absolute; TOP: 300px; LEFT: 0px;"> 
 
    <img src="C:\Users\kiran.nair\Desktop\Internship\current\pictures\wrapper.png" alt="wrapper" style="width:20000px;height:5px;"> 
 
    </div> 
 
    <div style="POSITION: relative; TOP: 20px; LEFT: 15%;"> 
 
    <img src="C:\Users\kiran.nair\Desktop\Internship\current\pictures\GLI.logo.png" alt="GLI.logo" style="width:145px;height:152px;"> 
 
    </div> 
 
    <div style="POSITION: relative; TOP: -20px; LEFT: 10%;"> 
 
    <ul class="navbar"> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">CONTACT</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 20px;"> 
 
      <a href="#">contact</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">RESEARCH</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">research</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">TRIP PREP</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">TRIP PREP</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">UPCOMING EVENTS</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">UPCOMING EVENTS</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">MEDIA</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">MEDIA</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">ENTUSI EVENTS</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">ENTUSI EVENTS</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">PROGRAMS</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">PROGRAMS</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">ABOUT</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">ABOUT</a> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">HOME</button> 
 
     <div class="dropdown-content" style="POSITION: relative; TOP: 10px;"> 
 
      <a href="#">HOME</a> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </div> 
 
    <div class="divdonate" style="POSITION: relative; TOP: -140px; LEFT: 80%;"> 
 
    <button class="donate">DONATE NOW</button> 
 
    </div> 
 
</div> 
 

 
<body> 
 

 
    <div> 
 
    <div class="pagetitle"> 
 
     <div> 
 
     <header class="title" style="POSITION: relative; LEFT: 15%">Uganda</header> 
 
     </div> 
 
    </div> 
 
    <div class="todocontent" style="POSItiON: relative; TOP: 15%; LEFT: 15%;"> 
 
     <div class="par" style="POSITION: relative; TOP: 15%; LEFT: 0%;"> 
 
     <p class="parcontent"> 
 
      Uganda was formed from the colonization of the Buganda Kingdom by the British in the 19th century. Britain wanted to protect the viability of the Nile River for its trading potential which prompted the British government to annex Buganda to create the 
 
      Uganda Protectorate in 1894. In 1962 Uganda regained its independence and declared itself a republic with Milton Obote as the first prime minister and former Bugandan King Muteesa as the president. Despite being largely ceremonial, Obote removed 
 
      the presidential position and established a new constitution in which he became a powerful president similar to a dictator. After committing many atrocities Obote was removed from power in a coup orchestrated by General Idi Amin who seized control 
 
      of the country. Amin proceeded to be nearly as atrocious as Obote when almost 500,000 citizens perished under his regime. Despite entering presidency with cheers, his actions made the country of Uganda hate him. After Amin was removed from power 
 
      by largely Tanzanian forces, Obote returned to presidency. A war broke out as a result from the election resulting in the deaths of between 100 and 500,000 people. This compelled 2 military commanders to conduct a coup in which Museveni gained 
 
      control. Yoweri Museveni remains in power till this date." 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div>

Bilder nicht funktionieren sollte aber nicht Sache richtig?

Answer 1

Sie sollten Inline-Stile entfernen, die Sie für alle Elemente mit der Klasse .dropdown-content eingefügt haben.

<div class="dropdown"> 
    <button class="dropbtn">CONTACT</button> 
    <div class="dropdown-content" style="POSITION: relative; TOP: 20px;"> 
     <a href="#">contact</a> 
    </div> 
</div> 

Dies wird Inline-Stil genannt. Stil geschrieben direkt auf HTML-Element:

style="POSITION: relative; TOP: 20px;" 

Als nächstes müssen Sie Regel ändern für .dropdown-content:

.dropdown-content{ 
    /* Your code here */ 
    top: 100%; 
}