I'm currently working on a simple HTML and CSS dropdown menu. Although I have managed to hide and show it, I am struggling to align the text inside the dropdown to the left. Can anyone help me figure out what I'm doing wrong?
Please take a look at this live example on CodePen.
Alternatively, here is a snippet of the code:
.toggle-dropdown p {
text-align: center;
}
.dropdown {
border: 1px solid grey;
width: 8%;
margin: auto;
box-shadow: 10px 10px 8px #888888;
padding: 0px 16px;
display: none;
}
.toggle-dropdown:hover .dropdown {
display: block;
}
ul {
list-style-type: none;
}
li a {
color: black;
padding: 12px;
text-decoration: none;
display: inline-block;
text-align: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DropDown</title>
</head>
<body>
<div class="toggle-dropdown">
<p>Dropdown Text</p>
<div class="dropdown">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Messages</a></li>
<li><a href="">Contacts</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</div>
</body>
</html>I would greatly appreciate any assistance. Thank you.