I am facing an issue with a nested div functioning similar to a drop-down menu. The problem arises when I click on the #two div as I want it to disappear.
To handle this, I utilized jQuery and tried using both .hide() and .slideUp().
However, upon implementing either of these methods and then hovering over #one, #two fails to reappear again.
Upon investigation, I discovered that jQuery adds the attribute style="display:none" to div#two, which cannot be overridden by CSS.
Adding display: block !important; in the CSS doesn't work either as it prevents jQuery from hiding #two when clicked.
What is the middle ground solution for this scenario? Re-triggering the class that hides #two does not resolve the issue since the mouse is still positioned over #one.
<div id="one">
<span>Main</span>
<div id="two">Sub</div>
</div>
The CSS code will look like:
#one{
position: relative;
}
#two {
display: none;
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
#one:hover #two {
display: block;
}