Styling Lists in HTML/CSS: How to Highlight an Entire Row with a Background Color When Using list-style?

I've been working on revamping the menu layout on my website.

Currently, I am using a list with a circle style type to display the menu options. Here's a glimpse:

Here is the code snippet:

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}

What I'm aiming for is to have the entire row highlighted in yellow once the user selects that section of the navigation menu.

Although the code is functional, I'm facing an issue with the styling of the <li> tag.

My initial approach created an undesired effect:

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}

Removing the margin set in the category class resulted in:

Unfortunately, the nice list style indicating that the option is selected disappeared...

I'm fundamentally trying to style this section:

Any suggestions or ideas on how I could achieve this styling task?

Thank you for taking the time to go through this! Your input is greatly appreciated.

htmlcsshtml-listsstyling

Answer №2

Here is a solution: 

li#selectedCat {
    padding: 5px;
    background-color: #FFCC00;
    list-style-position: inside;
    list-style-type: disc;
}

Check out the demo: http://example.com/solution-demo

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

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...

javascriptphpjqueryhtmlajax

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on databa ...

javascripthtmlcsssearchdropdown

Guide to efficiently utilizing flex to horizontally position two elements next to each other in a Material UI and ReactJS environment

I have successfully achieved side-by-side components of two cards from Material-UI. However, I am facing an issue when expanding one of the cards. The problem is that Card 1 automatically expands to match the size of Card 2 when Card 2 is expanded, even th ...

javascripthtmlreactjsflexboxmaterial-ui

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

javascriptphpjqueryhtmlwordpress

Declare a jQuery variable containing HTML elements

Greetings! I am facing an issue while attempting to create a jQuery variable that stores a table meant for displaying in different sections of a website. Unfortunately, I am encountering an error and struggling to comprehend the reason behind it. Below is ...

jqueryhtmlvar

JavaScript resets the timer whenever the page is refreshed

Is there a way to maintain the timer in a quiz even after refreshing the page? <html><h1>Js Timer</h1> <div style="font-weight: bold;" id="quiz-time-left"></div> <script type="text/javascript"> var total_seconds = ...

javascriptphphtmlcodeigniternan

Utilizing CSS to print specific columns on a separate page at regular intervals

I am facing a challenge with printing a very large HTML table, which is dynamic in the sense that the number of rows and columns can vary. When printing, the rows that exceed the page length are automatically continued on the next page. However, I also nee ...

htmlcssprinting

Is it possible to incorporate a similar box on a webpage?

I am trying to find a way to add a similar box to a webpage like the one shown in this image. The design I am referring to is from Reddit's theme, but I would like to know how to create a box with a different color and then have another box next to i ...

htmlcsstwitter-bootstrapbootstrap-4

Stop unwanted clicking on inactive buttons in Angular

I want to make sure that disabled buttons cannot be clicked by users who might try to remove the disabled attribute and trigger an action. Currently, I have this code to handle the situation: <button [disabled]="someCondition" (click)="executeAction()" ...

htmlangulartypescriptdom-events

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

Centered horizontally are images that have been floated

How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other. For the best display, please view in fullscreen on your computer as the example window is small. .compressor{ height: 1 ...

htmlcsscss-float

Different ways to alter the color of contextual color classes in Bootstrap 5

Currently working on my project with Bootstrap 5, I've been incorporating elements featuring classes such as btn-primary and text-success. In Bootstrap, the -primary class is associated with blue, while -success corresponds to green, among others. I&a ...

csstwitter-bootstrapbootstrap-5

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries. To view the code on codesandbox, please visit HERE EXPECTED OUTPUT https://i.sstatic.net/IIslv.png CODE const OR = sty ...

cssreactjsstyled-components

Is there a way to display a div element just once in AngularJS?

I only want to print the div once and prevent it from printing again. $scope.printDiv = function(divName) { var printContents = document.getElementById(divName).innerHTML; var popupWin = window.open('', '_blank', 'width=300, ...

javascripthtmlangularjs

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

javascripthtmlcss

Modify HTML text using conditional CSS without JavaScript

Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail. Here's my query: I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific B ...

javascriptcssreplaceonclick

Is it HTML True or False in the editor?

For the HTML template I'm working on, I want to implement a feature where users can toggle tags on and off easily. My idea is to make it as simple as setting a value to "true" or "false." Is there a way to achieve this within a single HTML file? ...

html

Step-by-step guide to creating a transition effect when the input changes

I'm looking to add a unique effect to my dropdown menu My goal is to create an effect in which the placeholder moves up and the new value seamlessly takes its place, using JS, jQuery, CSS, and HTML. View before transition View after transition ...

javascriptjqueryhtmlcss

Utilize the CSS property font-family to inherit styles for headings

Is it possible to use a different font family for headings than the one used in the body text while still maintaining a consistent look across all heading levels? One way to achieve this is by specifying the font family for each heading level individually ...

cssinheritance