Navbar Dropdown-Menü

Ich versuche, eine Website für meinen Lehrer zu erstellen, und ich möchte ein Dropdown-Menü unter einem Navigationsleistenelement haben, um alle Klassen aufzulisten, die er unterrichtet. Das ist, was ich habe, so weit:Navbar Dropdown-Menü

@import 'https://fonts.googleapis.com/css?family=Raleway'; 
 
#bluebar { 
 
    height: 5px; 
 
    width: 100%; 
 
    background-color: #1E90FF; 
 
} 
 
#navbar { 
 
    width: 100%; 
 
    background-color: #000; 
 
    height: 53px; 
 
    top: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    display: inline; 
 
    width: 100%; 
 
    padding-right: 35px; 
 
} 
 
li { 
 
    float: right !important; 
 
} 
 
#navbut { 
 
    display: block; 
 
    color: white; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    padding: 14px 19px; 
 
    text-decoration: none; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizelegibility; 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 
#navbut:hover { 
 
    background-color: #1E90FF; 
 
} 
 
/*#myDropdown { 
 
     z-index:1; 
 
     visibility:hidden; 
 
     opacity:0; 
 
     filter:alpha(opacity=0); 
 
     -webkit-transition:200ms ease; 
 
     -moz-transition:200ms ease; 
 
     -o-transition:200ms ease; 
 
     transition:200ms ease; 
 
    } 
 
    
 
    #myDropdown:hover { 
 
     visibility: visible; 
 
     opacity: 1; 
 
     filter: alpha(opacity=100); 
 
    }*/ 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #000; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    overflow: visible; 
 
    width: 150px; 
 
} 
 
#dropbut { 
 
    color: #fff; 
 
    padding: 14px 19px; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-decoration: none; 
 
    display: block; 
 
    background-color: #000; 
 
    text-align: left; 
 
    width: 150px; 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 
#dropbut:hover { 
 
    background-color: #1E90FF; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Mraz' Site</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="js/script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="bluebar"> 
 
    </div> 
 
    <div id="navbar"> 
 
    <ul class="navbar-right"> 
 
     <li><a id="navbut" href="#contact">Contact</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a id="navbut" class="dropbtn" href="#">Classes</a> 
 
     <ul id="myDropdown" class="dropdown-content"> 
 
      <a id="dropbut" href="#">AP Calculus AB</a> 
 
      <a id="dropbut" href="#">AP Calculus BC</a> 
 
      <a id="dropbut" href="#">Honors Statistics</a> 
 
     </ul> 
 
     </li> 
 
     <li><a id="navbut" href="#home">Home</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

Ich bin mir nicht ganz sicher, wie die Drop-Down zu machen, haben Sie eine Animation (Folie in und heraus schweben über „Klassen“ Taste, so dass jeder Hilfe wäre sehr geschätzt. auch irgendwelche Tipps für die Organisation/meinen Code aufzuräumen. ich bin ziemlich neu Hilfe Codierung so ist immer willkommen.

Quelle

2016-09-25 Zach Melendez