Is there a way to customize the background color of a dropdown menu?

Is there a way to change the background color of my dropdown menu when it is open? I have tried using the following CSS code:

.dropdown.open {
  background-color: black;
}

Here is how the HTML looks like:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#web-hidden" onClick="TypeWeb()">WEB DEVELOPMENT</a></li>
    <li><a href="#programming-hidden" onClick="TypeProgramming()">PROGRAMMING</a></li>
    <li><a href="#design-hidden" onClick="TypeDesign()">DESIGN</a></li>     
    <li><a href="#game-hidden" ></a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
           role="button" aria-haspopup="true" aria-expanded="false"
           onClick="TypeGameDesign()">
            GAME DEVELOPMENT
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Unity3D</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Coming...</li>
          <li><a href="#">UE4</a></li>
          <li><a href="#">VR</a></li>
        </ul>
    </li>
</ul>

Answer №1

The specified background hue is assigned to the a element. Therefore, apply the following styling:

.dropdown.open > a {
  background-color: #000 !important;
}

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

Pointer Cursor in CSS

I am experiencing a strange issue. When I set the cursor attribute value directly as a string like return ( <Grid item> <Card sx={{ padding: "1rem", ":hover": { cursor: "pointer" ...

Using Vue.js to update the v-bind:style when the mouse hovers over the element

I am working with a span element that displays different background images based on certain conditions. Here is the HTML: <span v-if="type" :style="styles" > </span> In the computed properties section: ...

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Hi there, I have encountered a problem and could really use your assistance. I am attempting to create a menu that displays content when you hover over an li tag. The first content should always be visible when hovering over the first li option or if no l ...

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

How to Place Content Below a Fixed Navigation Bar?

Is there a way to insert content below a fixed navigation bar without relying on the margin-top property? Any alternative solutions? I experimented with position: relative and the top property, but I'm looking for a different approach. ...

The bottom margin of the last element does not affect the size of its container

I'm curious as to why the margin-bottom of .content-b isn't affecting the height of the .container. .container { background: grey; } .content-a, .content-b { height: 100px; border: 1px solid red; margin-bottom: 100px; } <div class= ...

When using a Jquery $.each loop with DOM, it may not function properly on every element

I am attempting to create an HTML editor with additional markup capabilities in this demonstration, I am utilizing a jQuery $.each loop however, this loop only functions on the final element Here is the code snippet I am using: // Custom Svg Icon ...

"Exploring the Power of Internal Hyperlinks in HTML

As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link: <a href =& ...

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

Learn how to use an Angular Directive to automatically set the default value within an HTML Text box element. The code snippet provided below will guide you

I have encountered an issue with the code below. It seems to be working fine for changing the innerHTML of div and heading tags, but I am facing difficulties when trying to apply it to textboxes. @Component({ selector: 'app-root', template: ...

What causes z-index to be ineffective with sticky elements?

In my website, I've implemented rollover effects in a sticky footer and a responsive menu that stays at the top. However, when the menu is opened and extends over the footer, it covers everything except the rollovers. Closed navigation http://www.mus ...

What could be causing my image to not completely fill the background?

I'm struggling to get my background image to fit 100% screen width and height. Unfortunately, the image isn't showing up at all. Can anyone tell me what I'm doing wrong? Below is the code I've tried, but for some reason, it's not ...

Instructions on placing the bottom of an inline-block element flush with the bottom of a block element

In the scenario where I have the following HTML and CSS code: .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } <div class="something"> <span class="display-block">First name ...

Troubleshooting with mpdf reveals compatibility issues with Bootstrap

I'm encountering an issue where Bootstrap isn't functioning correctly in mpdf. Is there a solution to address this problem? I require all the content to be displayed on a single page, similar to how it appears in the preview. Here is the HTML co ...

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

String object causing jQuery selector to malfunction

const newHTML = '<html><head><title>Hello</title><link rel="apple-icon-touch-precomposed" href="image.jpg" /></head><body></body></html>'; alert($(newHTML).find('link[rel="apple-icon-touc ...

Is the Positioning of JS Scripts in Pug and Jade Documents Important?

Have you ever wondered why a page loads faster when certain lines are placed at the end of the tag instead of inside it? script(src="/Scripts/jquery.timeago.js") This phenomenon is often seen in code like this: //Jade file with JQuery !!! 5 html(lang=" ...

The justify-content-around property in Bootstrap-4 does not seem to be functioning as expected when

I've been working with bootstrap-4 and I'm struggling to understand why justify-content-around functions properly with flex-row but not with flex-column. I tried applying flex-column justify-content-around to div.item2 but it's not producing ...

Removing Header Image from a Single Page on a WordPress Website

Having an issue with my website on WordPress, see it here - I am attempting to remove the home page link attached to the header image on a specific page only of the site. The theme in use is Twenty Thirteen. I believe I need to add some conditional PH ...