I am facing two issues with my navigation menu that has dropdown lists:
- When clicking on a parent li, its submenu is displayed, but it gets hidden when clicking on another parent li or anywhere else on the page.
For the first li.parent which contains a login form, clicking on the form doesn't allow me to fill in the login details as it gets hidden. How can I interact with the login form without it hiding, but still close it when clicking elsewhere on the page?
Additionally,
2) I want the background color of the li.parent to change when one of its submenus is opened and return to its original color when the submenu is closed.
//HEADER NAV-BAR SCRIPTS:
//Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere
function hide_sub_navs() {
$('.parent ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".parent").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".parent").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});/** NAV MENU **/
div#nav-bar {
float: right;
display: inline-block;
height: 34px;
width: 40%;
clear: right;
padding: 0px 20px;
background-color: #FFF;
overflow: hidden;
}
/* Rest of the CSS styles remain the same */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Navigation menu HTML code here -->
</body>