Home > DeveloperSection > Forums > Unable to style the color of bullets in a list CSS
jayprakash sharma
jayprakash sharma

Total Post:117

Points:821
Posted on    August-19-2013 7:18 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1002  View(s)
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.



shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-19-2013 8:12 AM

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;}


Don't want to miss updates? Please click the below button!

Follow MindStick