UNABLE TO STYLE THE COLOR OF BULLETS IN A LIST CSS

jayprakash sharma

Total Post:117

Points:821
Posted by  jayprakash sharma
 1355  View(s)
Ratings:
Rate this:
Hi developers!

I'm trying to change the colour of the list points but it's not working? 

<div class="mobile-menu" id="mobile-menu">

        <div id="mobile-menu-links">

            <h4>General:</h4>

            <ul class="mobile-menu-links">

                <li><a href="">News</a></li>

                <li><a href="">The boring rules!</a></li>

                <li><a href="">The rankings</a></li>

            </ul> 

.mobile-menu #mobile-menu-links ul{

                list-style-type: none;

                margin:0;

                padding-left:3%;

            } 

            .mobile-menu #mobile-menu-links ul li{

                padding-bottom:2px;

                border-bottom:1px solid #bababa;

            } 

If I add color:red in either of the two CSS declarations, it doesn't change the colour. 

Please note that the HTML is closed in my document, I just copied the first part for you to see. 

Thanks.

  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: Unable to style the color of bullets in a list CSS

    Hi jayprakash!

    You should use below line of code

    HTML code

    <div class="mobile-menu" id="mobile-menu">

            <div id="mobile-menu-links">

                <h4>General:</h4>

                <ul class="mobile-menu-links">

                    <li><a href="">News</a></li>

                    <li><a href="">The boring rules!</a></li>

                    <li><a href="">The rankings</a></li>

                </ul>

        </div>

    </div>

    CSS code

    .mobile-menu #mobile-menu-links ul{

                    list-style-type: none;

                    margin:0;

                    padding-left:3%;

                }

                .mobile-menu #mobile-menu-links ul li{

                    padding-bottom:2px;

                    border-bottom:1px solid #bababa;

                }

    a:link {color:#FF0000;}

    a:visited {color:#00FF00;}  /* visited link */

    a:hover {color:#FF00FF;}  /* mouse over link */

    a:active {color:#0000FF;}

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!