Having trouble with the drop-down menu! I used "display: none;" in CSS to hide the list, but I'm not sure if it's the best way. This idea was borrowed from a Codecademy project.
I know there may be some cringe-worthy code here, but please bear with me, I am a complete beginner at programming! Thank you!
$(document).ready(function() {
$('p').hover(function() {
$(this).find('ul').fadeToggle(400);
});
});* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
height: 400px;
width: 400px;
}
.container {
max-width: 230px;
max-height: 300px;
margin: 0 auto;
background-color: #024F79;
}
p {
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
font-size: 18px;
padding: 8px;
}
ul {
list-style-type: none;
display: none;
}
ul li {
padding: 10px;
border-bottom: 1px solid white;
color: white;
font-size: 18px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
</div>
</body>