Я пытаюсь создать сайт для своего учителя, и я хочу иметь раскрывающееся меню под элементом навигационной панели, чтобы перечислить все классы, которые он преподает. Это то, что я до сих пор:Navbar Выпадающее меню
@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>
Я не совсем уверен, как сделать выпадающий есть анимация (слайд-в и при наведении курсора мыши над кнопкой «Классы», так что любой помощь будет высоко оценена. Кроме того, любые советы по организации/очистки мой код. Я довольно новыми для кодирования поэтому помощь всегда приветствуется.
[ Не используйте W3Schools] (http://meta.codereview.stackexchange.com/a/4977) – Fralec