CSS: Overlapping Unordered Vertical List - html

Question

Please check out the following fiddle.
.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>Curriculum
</li>
<li>ERSEA
</li>
<li>Family Services
</li>
<li>Mental Health
</li>
<li>Nutrition
</li>
<li>Health
</li>
<li>Policies & Procedures
</li>
<li>ERSEA
</li>
<li>Family Services
</li>
<li>Mental Health
</li>
<li>Nutrition
</li>
</ul>
</div>
<div class="right">
This is a test
</div>
</div>
I am having an issue with my CSS unordered list links. The links are not appearing on their own, separate lines. For instance, Link1 (Curriculum) is running into Link2 (ERSEA), so-on and so-forth. Also, I created two <div> tags, setting one to 25% of the div and the other to 75% of div. However, they are interfering with one another, as you can see from my fiddle, the "This is a test" text appears behind my unordered list.
I need my side navigation bar to be fixed in one position and have all of the links on their own separate lines. In addition, I need to have the "This is a test" text appear in its own separate portion of the site; to the right of the side navigation bar.

Answer 1

You have a couple of issues:
you have set your li:s to float: left, this will cause them to merge together.
you have set the .sideNav to have position: fixed, this means that it will not be calculated into the "flow" of the rest of the items on the site and therefore sit on top of them.
Here's a little updated css to help you along a little...
.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;
display: block;
}
.right {
padding-left: 25%;
width: 75%;
}