Having difficulty customizing the color of bullet points within a list

I've been attempting to update the color of the list points without success. Can you help me troubleshoot?

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

Despite adding color:red to either of the CSS declarations, the change in color is not taking effect.

Please be aware that the HTML code is complete in my document; I only included a portion for reference purposes.

Thank you.

htmlcss

Answer №1

There are several methods to achieve this...

  1. The concept of coloring the bullet points

    ul { list-style: none; }

li:before { content:"\2022 \00A0"; color: red; }

    Example Link

  2. Another Resource

After reviewing feedback, I have confirmed the color modification here

Answer №2

Can you please include the additional CSS styles below?

a:link {color:#FF0000;} 
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}  
a:active {color:#0000FF;}

Check out this JSFiddle link for reference.

Answer №3

Give this a shot: http://jsfiddle.net/Dnxmm/. Make sure [ul] comes first.

ul.mobile-menu-links{
            margin:0;
            padding-left:3%;
            color:red;
        }

 ul.mobile-menu-links li{
            padding-bottom:2px;
            border-bottom:1px solid #bababa;
            color:red;
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Moving Text Over a Static Background Image in HTML and CSS

Currently working on developing a website that involves coding in HTML and CSS. However, I've encountered an issue while programming. Whenever I attempt to adjust the positioning of my text, the background image shifts along with it, making it impossi ...

htmlcss

Is it possible for me to designate a specific class for the rev value?

<a href="img1.jpg" rel="zoom-id:bike" rev="img1.jpg"> <img src="" class="img-thumb"/></a> Shown above is a snippet of HTML code. I wonder if it's possible for the attribute rev="img1.jpg" to have a class that only affects the s ...

css

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...

htmlcss

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

Struggling to align a box perfectly to the right within an AppBar

I'm struggling with aligning the box containing user info to the right edge of my MUI App bar. It seems to be stuck at the end of the last box instead of going all the way to the right. Can anyone help me achieve this? https://i.stack.imgur.com/uJ1on. ...

cssmaterial-ui

A guide to mastering Controllers in AngularJS

Trying to set up a basic page with a controller but encountering difficulties. The HTML code is straightforward, with an Angular script included, but the functionality isn't working as expected. The HTML snippet: <!DOCTYPE html> <html ng-ap ...

javascripthtmlangularjs

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Core MVC - Adjusting Font Size

After setting up an MVC Core App with automatic scaffolding, I am now faced with the challenge of adjusting the font size in my html View. The question is: How can I change the font size in bootstrap.css? There seem to be multiple font sizes available an ...

c#htmlcssasp.net-core-mvc

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

javascriptcssanimationfrontend

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

A guide to showcasing JSON data on a webpage using JavaScript

I am currently working on a SOAP WSDL invocation application in MobileFirst. The response I receive from the SOAP WSDL is in JSON format and is stored in the result variable. When trying to access the length of the response using result.length, I encounter ...

javascripthtmljson

Remove the option to select specific minutes from the time input on an HTML

My HTML code includes a time input that looks like this: <input id="appt-time" type="time" name="appt-time" value="13:30" /> I want to figure out how I can remove the minutes from the input or ensure that the ...

htmltime

Partially loading CSS stylesheet

My directory structure looks like this.... iamdan > css > style.css The php file, named head.php, is located in a folder called includes within: iamdan > includes > head.php This file contains the following code: <head> <title>Website ...

phpcssload

Setting the height of an element based on the height of its background image

Hey there! I'm currently working with this component in my app, and right now, the height of the ButtonBase element is fixed. I fetch an image from the backend and use it as a backgroundImage for the ImageImagine component. I want to dynamically adjus ...

cssreactjsmaterial-uistyled-components

When the onLeave event of fullPage.js is activated

I am struggling to implement two CSS events when transitioning between sections on a fullPage.js application. To see my current progress, you can view the following fiddle: http://jsfiddle.net/pingo_/67oe1jvn/2/ My objectives are as follows: To modify t ...

jquerycssfullpage.js

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

javascriptjqueryhtmlnotepad

Guide to generating a dropdown menu and linking it with data received from a server

I am completely new to Angular and recently received a project involving it. My task is to create a nested dropdown list for Json data retrieved from a server using Rest Api calls. The data contains a Level attribute that indicates the hierarchy level of ...

htmlangulartypescript

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

Building a loading bar using dots

<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...

javascriptjqueryhtmlcss