Bullet points when UL and LI are already assigned

Question

I am building a webpage for class. The ul and li elements are already assigned for my navigation bar at the top to navigate different pages of my website. Since these elements are already defined, how do I create bullet points for some text in the webpage without messing up my navigation bar? Below is a snippet of my css file. I am trying to add bullet points

 ul { margin:0; padding:0; overflow:hidden; background-color: #f0d8eb; /* play around with color */ list-style-type: none; border: 1px solid black; } li { float:left; padding-left: 100px; } li a { color:black; display:block; text-align: center; padding:10px 10px; text-decoration: none; } li a:hover{ background-color: red;

Here is a snippet of my html page where I want bullet points

 <h1>CLASSES TAKEN</h1> <p> <!--trying to get bullet points here */--> </p>

Answer 1

To separate your ul to navigation add a class to your unordered list to to be able not affect your navigation when you update your ul css.

your unordered list must be like this

<ul class="my-bulleted-list"> all list goes  here </ul>

you css must be like this

    my-bulleted-list.ul {
    margin:0;
    padding:0;
    overflow:hidden;
    background-color: #f0d8eb; /* play around with color */
    list-style-type: none;
    border: 1px solid black; 
}
my-bulleted-list.ul li {
    float:left;
    padding-left: 100px;
    }
my-bulleted-list.ul li a {
    color:black;
    display:block;
    text-align: center;
    padding:10px 10px;
    text-decoration: none;
}
my-bulleted-list.ul li a:hover{
    background-color: red;

Cheers!