i have unordered list on a page. but my list are showing horizontal not vertical like i want. my css is in my html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capture Ability - The Power of The iPhone</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
ul.story {
list-style-type: none;
margin: 0;
padding: 0;
justify-content: left; /* Aligns the list items to the left */
background-color: #fff;
}
li {
position: relative;
}
li a {
display: block;
color: #800020;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="inspirational.html">Inspirational</a></li>
<li class="dropdown">
<a href="javascript:void(0)">Technology</a>
<div class="dropdown-content">
<a href="tech1.html">The Power of The iPhone</a>
<a href="tech2.html">Wheelchair Camera Mount</a>
<a href="tech3.html">Outdoor Camera Mount</a>
<a href="tech4.html">Mini Tripods</a>
<a href="tech5.html">Fixed Lens Cameras</a>
<a href="tech6.html">Creating a New Device</a>
<a href="tech7.html">The Accessible Tripod</a>
<a href="tech8.html">Window Photography</a>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div style="text-align: left">
<img src="images/camerawheel.jpg" alt="camera being held to the side of a wheelchair">
</div>
<h1>Capture Ability</h1>
<p>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</p>
<hr>
<h4>Choosing the best accessible camera for a person with disabilities - July 18, 2024</h4>
<p>Choosing the best accessible camera for a person with disabilities involves considering their specific needs and challenges. Here are some options that cater to different types of disabilities:</p>
<h3><strong>For Users with Limited Mobility or Dexterity:</strong></h3>
<ul class="story">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<footer style="text-align: center">
<p>© 2024 Capture Ability. All rights reserved.</p>
</footer>
</div>
</body>
</html>