锚标记：单击时打开div并单击更改bg颜色

Question

 .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, My doubt is When I hover on purchase billing then second navigation menu should appear to the down and purchase billing should have a the same background on clicking when we hover that li .

Just like

Any help would be great.

Thank You.

Answer 1

Try this. This snippet displays the down menu on clicking the purchase and billing link

 $(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

simply fix this with css , check it if this is what you need ?

 .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> 

yes or you can do it with :target property like

 .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> 

Answer 3

You can do this with simply with jquery/javascript. Check this out.

 $(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>