Looking to update the background color of the items in a sliding door menu using CSS

I'm having trouble changing the background color of my list items in a sliding door menu using CSS. I've successfully changed the left border to green and the text to white, but the background color remains unchanged. Below is the code I'm using:

.slidedoormenu
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px; /* set menu width (remember to include border below!) */
    border-left: 8px solid #007f00; /* thick left border for menu */     
}
.slidedoormenu li
{
    border-bottom: 1px solid #885b5c; /* Gray border below each menu item */
}
.slidedoormenu li a
{
    background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned at top left initially */
    font: bold 16px "Lucida Grande" , "Trebuchet MS" , Verdana;
    display: block;
    color: white;
    width: auto;
    border-bottom: 1px solid white; /* White border below each menu item link for depth */
    padding: 7px 0; /* Vertical padding for each menu link */
    text-indent: 8px;
    text-decoration: none;
}
.slidedoormenu li a:visited, .slidedoormenu li a:active
{
    color: white;
}
.slidedoormenu li a:hover
{
    background-position: -387px 0; /* Shift background image horizontally by 387px */
}
.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a
{
    border-bottom-width: 0; /* Remove bottom border for last menu item */
}
.slidedoormenu li.lastitem a
{
    padding: 8px 0; /* Increase vertical padding of last menu link by 2px */
}

Answer №1

I can’t imagine a scenario where this doesn’t function properly.

.slidedoormenu li{
background-color:#3a8f07;
border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */}

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

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

When I forget to use var_dump, PHP fails to load scripts

When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...

Difficulty encountered in setting margin to 0 in Bootstrap 4 framework

Upon observation, I found that setting margin: 0px had no effect. Even after specifying a margin of 0 for left and right, the screenshot still displayed the margin. https://i.sstatic.net/mkYsO.png Initially, I checked for any conflicting classes or IDs c ...

Alter appearance using various classes

I am seeking assistance in changing the font of text using classes. I have multiple texts with different classes and I want to be able to edit all the texts without adding another dropdown menu. I believe that the change needs to occur in a script. Pleas ...

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

I have been experimenting with Bootstrap's Example accordion code, which can be accessed via this link: http://jsfiddle.net/qba2xgh6/18/ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel ...

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

Populate modal form with database information without using Bootstrap

As I work on populating a form with data from an sqlite database, I've come across a stumbling block. My code is available for reference on JSFiddle: https://jsfiddle.net/daikini/e71mvg7n/ One important note: Bootstrap isn't being utilized in t ...

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

Vanishing Submit Button with CSS

In my input submit button, I have included the following code: <input class="buttons" type="button" onclick="javascript:jQuery(xxxx)" style="font-size: 12px;" value="Invite to Bid"> Additionally, there is a CSS function that adds an elegant "Go" im ...

Stopping individuals from engaging in the act of spamming a picture upload form

I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

Adjust the class attribute in real-time

My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functiona ...

Setting the margin to 0 auto to create a CSS Grid layout featuring an Image taking up the entire right side

I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this: https://i.stack.imgur.com/wtk0G.png Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's en ...

Reducing text size upon cell selection in Material UI Table

Seeking assistance in identifying the CSS property responsible for subtly shrinking text within cells when selected To see the issue, simply click on a cell in this code sandbox: https://codesandbox.io/s/material-ui-table-virtualized-t2xkt IMPORTANT: se ...

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...