Question
Menu list populated on hovering on a link does not disappear even after moving the cursor to different link
We are working a requirement where we need to populate menu list upon hovering on each field.
Menu list populated for field 1 should disappear when the cursor is moved to hover on field 4.
However, in our case, the menu list populated for field 1 continuous to display on screen even when the menu list of field 4 populates. Could anyone assist to fix this?
This works fine only when the user clicks on the screen. However, we want to achieve the functionality only with mouse hover instead of mouse click.
Pegasystems Inc.
IN
Hello Supriya,
Thanks for posting your query in PSC :)
Is your business requirement similar to below code:
Hello Supriya,
Thanks for posting your query in PSC :)
Is your business requirement similar to below code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="container">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1lkalsdfjlasjdflasjdlfjasldf</a>
<a href="#">Link 2asdfasdfasdfasdfasdfasdfasdf</a>
<a href="#">Link 3asdfasdfasdfasdfasdfasdfasdfasd</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown1</button>
<div class="dropdown-content">
<a href="#">Link 1vvvvvvvvvvvvvlkalsdfjlasjdflasjdlfjasldf</a>
<a href="#">Link 2vvvvvvvvvvvvvvvvvvvvasdfasdfasdfasdfasdfasdfasdf</a>
<a href="#">Link 3vvvvvvvvvvvvvvvvvvvvvvasdfasdfasdfasdfasdfasdfasdfasd</a>
</div>
</div>
<a href="#news">Link</a>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Enter above code in below link, click run and hover over Dropdown1 and Dropdown2 menu:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
In out of the box, I see the menu items are displayed on click event.
Regards,
Rincy
Accenture Technology Solutions Pte Ltd
IN
Thanks for the response Rincy!
Yes, our business requirement is same. Using OOTB menu items display on hover the previous menu is not disappearing.
Pegasystems Inc.
IN
Hello Supriya,
I modified OOTB rules pzDesignerStudioMenu and pzStudioHeader such as to include hover event and remove the click event. Post the changes, I see below behavior in Pega 7.3.
If this is same behavior at your end, could you raise a Support request regarding this.
Regards,
Rincy
Pegasystems Inc.
IN
Hi Supriya,
Do let us know the SR ID once you create it so that we may tag it to this discussion and continue to track it. Please mention the URL to this post while creating the SR.
Regards,