Clicking on an anchor tag will open a div and change the background color

.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>


<div class="down_nav_bar">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>

Hello, When hovering over purchase billing, the second navigation menu should appear below with the same background when clicking on that li.

Similar to https://i.sstatic.net/sF8Ui.png

Any assistance would be greatly appreciated.

Thank You.

javascriptjqueryhtmlcss

Answer №1

Give this a try. When you click on the "purchase and billing" link, the dropdown menu will be displayed

$(document).ready(function(){
  $('.down_nav_bar').removeClass('displayed');
  $('#purchase').mouseenter(function(){
    $('#purchase').addClass('newColor');
    $('.down_nav_bar').addClass('displayed');
  });
  $('.nav_bar>ul>li:not(#purchase)').mouseenter(function(){
    $('#purchase').removeClass('newColor');
    $('.down_nav_bar').removeClass('displayed');
  });
  $('.nav_bar>ul>li').click(function(){
    $('.nav_bar>ul>li').removeClass("newColor");
    $(this).toggleClass('newColor');
  });
});
.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
        .nav_bar ul li a {
          text-decoration: none;
          color: #ffffff;
          display: block;
          border-right: 1px solid #fff;
          padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  display:none;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
.down_nav_bar.displayed{
  display:block;
}
.newColor{
  background: #e6b3a1;
  color:#c3000f;
}
.nav_bar ul li.newColor>a{
  color:#c3000f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_bar">
                <ul>
                                      <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li id="purchase"><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>


<div class="down_nav_bar displayed">
                <ul>
                    <li><a href="#">Purchase Plan</a>
                    </li>
                        <li><a href="#">My account</a>
                    </li>
                                            <li><a href="">Invoice</a>
                    </li>
                    <li><a href="">How to pay</a>
                </ul>
            </div>

Answer №2

If you want to achieve this functionality using jQuery or JavaScript, take a look at the following code snippet.

$(document).ready(function(){
    $(".nav_bar ul li").click(function(){
                    if($(this).text().trim()==='Purchase and billing'){
        $(".down_nav_bar").show();
                $(".nav_bar ul li").css('background-color', '#c30015')
        $(this).css('background-color', '#e6b3a1');
                
      }else{
        $(".down_nav_bar").hide();
  $(".nav_bar ul li").css('background-color', '#c30015');
      }
               
        
});
});
.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left; }
  .nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: thin white solid; }
    .nav_bar ul li {
      list-style: none; }
      .nav_bar ul li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        border-right: 1px solid #fff;
        padding: 8px 16px; }
  .nav_bar ul li a:hover {
    background: #e6b3a1;
    text-decoration: none;
    color: #c3000f; }

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left; }
  .down_nav_bar ul {
    padding: 0;
    margin: 0;
    display: flex; }
    .down_nav_bar ul li {
      list-style: none; }
      .down_nav_bar ul li a {
        text-decoration: none;
        color: #c3000f;
        display: block;
        padding: 8px 23px 8px 18px; }
  .down_nav_bar ul li a:link {
    text-decoration: none; }
  .down_nav_bar ul li a:visited {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:hover {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
  .down_nav_bar ul li a:active {
    border-bottom: 2px #c3000f solid;
    text-decoration: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_bar">
                <ul>
                   <li><a href="#">Post sponsor job</a>
                    </li>
                    <li><a href="#">Applied KOLs</a>
                    </li>
                    <li><a href="#">Purchase and billing</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                </ul>
            </div>


<div class="down_nav_bar" style="display:none">
                    <ul>
                        <li><a href="#">Purchase Plan</a>
                        </li>
                        <li><a href="#">My account</a>
                        </li>
                        <li><a href="">Invoice</a>
                        </li>
                        <li><a href="">How to pay</a>
                    </ul>
                </div>

Answer №3

Is this the CSS fix you were looking for?

.nav_bar {
background: #c30015;
margin-left: 50px;
float: left;
}
.nav_bar > ul {
padding: 0;
margin: 0;
display: flex;
border-bottom: thin white solid;
position:relative;
}
.nav_bar ul li {
list-style: none;
}
.nav_bar ul li a {
text-decoration: none;
color: #ffffff;
display: block;
border-right: 1px solid #fff;
padding: 8px 16px;
}
.nav_bar ul li a:hover {
background: #e6b3a1;
text-decoration: none;
color: #c3000f;
}
.nav_bar ul li a:active , .nav_bar ul li a:focus {
background: #e6b3a1;
text-decoration: none;
color: #c3000f;
}
.nav_bar ul li:hover .down_nav_bar {
display:block;
}
.down_nav_bar {
background: #e6b3a1;
margin-left: 34px;
float: left;
position:absolute !important;
left:0;
width:100%;
display:none;
padding: 0;
margin: 0;
}

.down_nav_bar li {
list-style: none;
display:inline-block;
}
.down_nav_bar li a {
text-decoration: none;
color: #c3000f;
display: block;
padding: 8px 23px 8px 18px;
}
.down_nav_bar li a:link {
text-decoration: none;
}
.down_nav_bar li a:visited {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li a:hover {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li a:active {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
.down_nav_bar li .active {
border-bottom: 2px #c3000f solid;
text-decoration: none;
}
<div class="nav_bar">
  <ul>
    <li><a href="#">Post sponsor job</a> </li>
    <li><a href="#">Applied KOLs</a> </li>
    <li><a href="#">Purchase and billing</a>
      <ul class="down_nav_bar">
        <li><a href="#" class="active">Purchase Plan</a> </li>
        <li><a href="#">My account</a> </li>
        <li><a href="">Invoice</a> </li>
        <li><a href="">How to pay</a>
      </ul>
    </li>
    <li><a href="#">Account Settings</a> </li>
  </ul>
</div>

Another approach could be using the :target property like so:

.nav_bar {
  background: #c30015;
  margin-left: 50px;
  float: left;
}
.nav_bar > ul {
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: thin white solid;
  position:relative;
}
.nav_bar ul li {
  list-style: none;
}
.nav_bar ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  border-right: 1px solid #fff;
  padding: 8px 16px;
}

.nav_bar ul li a:hover,
.nav_bar ul li a:focus,
.nav_bar ul li a:active,
#target:target {
  background: #e6b3a1;
  text-decoration: none;
  color: #c3000f;
}

.down_nav_bar {
  background: #e6b3a1;
  margin-left: 34px;
  float: left;
  position:absolute !important;
  left:0;
  width:100%;
  display:none;
  padding: 0;
  margin: 0;
}

.down_nav_bar li {
  list-style: none;
  display:inline-block;
}
.down_nav_bar li a {
  text-decoration: none;
  color: #c3000f;
  display: block;
  padding: 8px 23px 8px 18px;
}
.down_nav_bar li a:link {
  text-decoration: none;
}
.down_nav_bar li a:visited {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li a:hover {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li a:active {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}
.down_nav_bar li .active {
  border-bottom: 2px #c3000f solid;
  text-decoration: none;
}

#target:target + ul {
  display:block;
}
<div class="nav_bar">
  <ul>
    <li><a href="#">Post sponsor job</a> </li>
    <li><a href="#">Applied KOLs</a> </li>
    <li><a id="target" href="#target">Purchase and billing</a>
      <ul class="down_nav_bar">
        <li><a href="#" class="active">Purchase Plan</a> </li>
        <li><a href="#">My account</a> </li>
        <li><a href="">Invoice</a> </li>
        <li><a href="">How to pay</a>
      </ul>
    </li>
    <li><a href="#">Account Settings</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

Automate Chrome browser to continuously refresh until desired item is located using Selenium and Chromedriver

I am attempting to create a Python script using selenium that will continuously refresh the current Chrome page until a specific item, identified by driver.find_element_by_partial_link_text("Schott"), is found. This is what I had in mind: while not drive ...

pythonhtmlgoogle-chromeseleniumselenium-chromedriver

Exploring the power of React Leaflet and the exciting possibilities of React Leaflet

I'm currently in the process of implementing the draw functions on a leaflet map. I started off by creating a new app with just react-leaflet installed. I used npx create-react-app and installed the following packages: npm install react react-dom lea ...

javascriptreactjsleafletreact-leafletreact-leaflet-draw

Using Jest or Mocha alongside Vue: Uncaught SyntaxError: Cannot use import statement outside a module

Update: This post has undergone multiple edits, please refer to this new Stackoverflow post for a clearer explanation of the issue: SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial I have been searc ...

javascriptvue.jsjestjsmocha.jsvue-test-utils

Having trouble with my findIndex function in Node.js while working with a mongo DB database

I am having difficulty finding the index of a specific product in a MongoDB database. const cart = await this.model.findOne({ user: { $eq: user } }); if (cart) { const itemFound = cart.products.findIndex( (item) => item._id === ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to eliminate the pause in my slideshow?

After spending a few hours working on this project, I've almost completed it. However, I'm facing an issue with the slideshow functionality. It seems to pause after cycling through all the images. Any suggestions on why this might be happening? ...

jquerycss

Using Django, Ajax, and JavaScript, learn how to efficiently send data with multiple dynamic form IDs

Apologies for my poor English. I am trying to send data from a Django form using AJAX and JavaScript. The issue I am facing is that I have added a button to dynamically add more fields, but every time a field is added, the field ID increases. I have succe ...

pythonjqueryajaxdjango

When a Javascript function marked as async is executed, it will return an object

Async function is returning [object Promise] instead of the desired real value. Interestingly, I can see the value in the console log. It seems like this behavior is expected from the function, but I'm unsure how to fix my code. This code snippet is ...

javascriptvue.jspromiseelectron-vue

What is the best way to alter the order of the .map function in JavaScript to display in ascending or descending order?

I currently have 25 songs in my Spotify playlist, with the possibility of more being added in the future. The songs are numbered from 1 to 25. However, the map() function I use only displays the top 10 songs (1 to 10). When a new song is added, it is assig ...

javascriptnode.jsreactjsnext.jsmap-function

Update the content of the page without reloading images

Is there a way to refresh a webpage on click without refreshing the images, only the text content? Can this be achieved without clearing the cache? I attempted to refresh the entire page with the following JavaScript code: <script> $(".secon ...

javascriptajax

Utilize jQuery to deactivate all click interactions except for the scrollbar

I am currently working on creating a page that is completely unclickable, both with right and left clicks, and I want to display a message when someone attempts to click. This may lead to some questions such as "Why would anyone want to do this? This s ...

javascriptjquery

Is this jQuery script not functioning properly?

I came across this code on jsfiddle, and I really want to incorporate it into my PHP file. However, when I tried to do so, it didn't work even though I simply copied and pasted the code without making any changes. Here is my code: <!DOCTYPE html& ...

javascriptphpjquery

"Revolutionary AJAX-enabled PHP social commenting system with multi-form support

Why is it that when I submit forms using these ajax functions in PHP, they only send to the first form on the page? I have multiple forms under each article and I want them to be submitted separately. What am I doing wrong? ...

javascriptphpjqueryhtmlajax

having difficulty carrying out the commands following the post request, without encountering any error messages

I am having trouble executing some instructions after making a post request using an async function that gets called on a button click. async function createPost() { try { await axios.post("http://localhost:3001/post", { content ...

javascriptreactjsexpress

Shader material for border and overlay effects in THREE.js

Can a sphere in THREE.js be given a material shader to achieve a unique visual effect like the one shown here? (I'm specifically interested in replicating the border, glow, and streak on the red sphere.) https://i.sstatic.net/rjfkm.png If this is po ...

javascriptthree.js

Dealing with Superagent and Fetch promises - Tips for managing them

Apologies for posing a question that may be simple for more seasoned JS programmers. I've been delving into superagent and fetch to make REST calls, as I successfully implemented odata but now need REST functionality. However, I'm facing confusio ...

javascriptreactjssuperagent

Steps for creating an npm package from the /build folder of Create React App

Hello! I am currently working on an app developed using the create-react-app boilerplate. After compiling and building it with npm run build, I now want to transform the /build folder into an npm package for easy use in other projects as a micro app. Can ...

javascriptreactjsnpmdeploymentcreate-react-app

Error message: "The contract is not defined in thirdweb-dev/react

I am currently using thirdweb-dev/react library to interact with a smart contract. However, I am encountering an issue where the contract is showing up as undefined in my code along with the following error message: query.ts:444 Error: Could not ...

javascriptreactjssmartcontractsweb3js

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

What is the proper method for attempting to implement Response.Redirect?

Is there a better way to handle redirect failures than using a try-catch block? Typically, a redirect always throws an exception which can be caught as a ThreadAbortException. However, is this the most effective approach? EDIT: My goal is to redirect to ...

c#asp.net.nethtml

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

My challenge is to optimize the spacing between 4 boxes based on screen size: The layout should adjust as follows: If it's xxl or larger, all 4 boxes should be in a single horizontal row. If it's md or larger, two boxes should be in the firs ...

cssbootstrap-4bootstrap-5