Ways to enhance the visibility of the active menu item background

Is there a way to customize the background color of an active menu item in Bootstrap 5 dropdown menus to look similar to Windows desktop applications?

https://i.sstatic.net/VHmD04th.png

Here is the code for creating a Bootstrap 5 dropdown menu, also available on JSFiddle:

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c57485749">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229362937">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

htmlcsstwitter-bootstrapdrop-down-menubootstrap-5

Answer №1

Make sure the color changes when you hover over it. You'll need to create a style for this to happen. Feel free to choose any color you like. The code snippet below demonstrates how you can modify the color of elements by adding your chosen color.

<style>
      .dropdown-item:focus, .dropdown-item:hover {
        background-color: blue !important;
        color:white !important;
      }      
  </style>

Demo

.dropdown-item:focus, .dropdown-item:hover {
            background-color: blue !important;
            color:white !important;
          } 
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3ecf3ed">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc3dcc2">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

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

Unable to open a directory in PHP using a passed value as it is not functioning properly

This is a snippet of my HTML and PHP code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gallery</title> <script src="js/jquery-1.7.2.min.js"></script> <script ...

phphtmlopendir

Issues with Tooltips and Popovers in Bootstrap 5

I recently built a small website using Bootstrap 5. On this site, I added 2 buttons at the bottom of the page with tooltips and popovers. However, they seem to be malfunctioning as nothing is being displayed. You can check out the site for yourself at th ...

javascripttwitter-bootstraptooltippopoverbootstrap-5

Refreshing modal content following successful AJAX call

Does anyone know how to fix this issue in my code? I need to reload a modal for another database query after a successful operation if(result === 'success'){ $("#editarModalOcup").modal('hide'); $('#success .modal-body'). ...

javascriptajaxtwitter-bootstrap

show the contents of the successful jQuery AJAX response

When using jQuery AJAX, I am retrieving values from a database and then trying to display them in a dropdown menu. Initially, I pass the ID to fetch the level. Once I have the level ID and name, I then fetch the values related to the selected level and dis ...

c#jqueryhtmlajax

Gradient that runs in a straight line from opposite ends

Is there a way to apply linear gradients from both the top and bottom to create smoother lines when text is scrolled? I was able to achieve a linear gradient at the bottom using this code: <div className="vsebina" style={{WebkitMaskImage:&apo ...

css

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Real-time Exchange of HTML Data Forms

Hey everyone, I am completely new to programming and I would really appreciate your guidance through this process. Let's imagine a scenario where two users need to communicate through HTML forms. The first user fills out an HTML form (first name, la ...

javascriptjqueryhtmlajaxforms

How can you add a border before and after text as well as around the entire box

Is there a way to add borders to the image below? I would like to include a border that looks similar to this: text added before and after the entire box How can I achieve a border using css either with before, after, or background? ...

htmlcssborder

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

javascripthtmlcss

Angular forms not recognizing is-invalid class functionality

I was trying to learn angular forms, and I noticed that when I applied the is-invalid class to an input tag, the border color did not change to red. Can anyone explain why this is happening? <div class="container-fluid"> <h1> ...

htmlangularbootstrap-4

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

cssvue.jswebpackvuetify.js

What is the best way to retrieve the information stored in an object?

let items = { 1001: {item: 'Chocolates', price: 10, quantity: 10}, 1002: {item: 'Biscuits', price: 10, quantity: 10}, 1003: {item: 'Bread', price: 20, quantity: 5}, 1004: {item: 'Milk', price: 25, quantity: 5}, 1005: ...

javascripthtml

Retrieve the radio button value from the HTML form

This website is designed to calculate ideal weight based on input data, but I am encountering an issue with the gender selection. The code seems to only recognize the first condition for female, while ignoring the else if condition for male. How can I fix ...

javascripthtml

Retrieve the immediate div sibling that comes after

I have been struggling to create an XPath query that will accurately identify a specific element within a document structure like the one below: <AAA> <div> </div> <div> </div> <div> <div id=' ...

htmlseleniumxpathselenium-webdriver

Utilizing Pseudo Elements within the QT Designer Interface

I was attempting to add a vertical line to the left of a button with a hover effect using a pseudo-element in qt-designer styleSheet, but it was not displaying correctly. Here is the code I used: QPushButton{ position: relative; padding: 10px 20px; border: ...

cssqtqt-designer

Boosting Precision in Geolocation for Internet Explorer 11

On my website, I have implemented a Google Map (v3). Whenever a user visits the page, I retrieve their geolocation data from their browser if it is supported: navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {enableHighAccuracy: tr ...

javascripthtmlgoogle-mapsinternet-explorergeolocation

Preserving User Login Details during Page Refresh in AngularJS

I am currently working on retaining user information even when the page refreshes. To achieve this, I have implemented the use of cookieStore in my Angular App. Here is how my run module looks like: .run(['$rootScope', '$cookieStore', ...

javascripthtmlangularjsauthenticationcookiestore

What is the correct way to make an image adjust to changes in a browser's size?

I'm in a bit of a quandary: How can I ensure that an image resizes properly based on viewport size? So, here's the challenge - I have an image that is 400 pixels wide and 400 pixels tall. My aim is for it to occupy only 90% of the width of the v ...

cssmobileresponsive-designmedia-queriesresponsive

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog