Please take a look at this demo.
.sideNav {
width: 25%;
}
.sideNav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
position: fixed;
overflow: auto;
}
.sideNav li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
}
.sideNav li {
font-family: "Comic Sans MS", cursive;
text-align: center;
float: left;
}
.right {
width: 75%;
}<div class="content">
<div class="sideNav">
<ul>
<li><a href="curriculum.html">Curriculum</a>
</li>
<li><a href="ersea.html">ERSEA</a>
</li>
<li><a href="family-services.html">Family Services</a>
</li>
<li><a href="mental-health.html">Mental Health</a>
</li>
<li><a href="nutrition.html">Nutrition</a>
</li>
<li><a href="health.html">Health</a>
</li>
<li><a href="policies.html">Policies & Procedures</a>
</li>
<li><a href="ersea.html">ERSEA</a>
</li>
<li><a href="family-services.html">Family Services</a>
</li>
<li><a href="mental-health.html">Mental Health</a>
</li>
<li><a href="nutrition.html">Nutrition</a>
</li>
</ul>
</div>
<div class="right">
This is a test
</div>
</div>I'm facing an issue with the CSS unordered list links. The links are not displaying on separate lines as intended. Each link seems to be running into the next one. Additionally, I've set up two <div> tags where one should occupy 25% of the div and the other 75%. However, they seem to overlap each other in my demo where the text "This is a test" appears behind the list.
What I need is for the side navigation bar to remain fixed in one position and have each link displayed on its own line. Furthermore, the text "This is a test" should be placed separately on the right-hand side of the side navigation bar.