On Hovering an element,make another element appear - html

Question

.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 2px;
}
div.SampleMenu ul li {
color: White;
padding: 0;
display: none;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover+.SampleMenu ul li {
display: block;
}
<div class="CentralHeader">
<div class="LinkBar" id="HeaderBar">All</div>
<div class="SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
In the above segment,I try to manipulate a user-drop down while an element
is hovered,but the drop down disappears as the cursor is moved towards
drop down. I want to select an item in drop down which needs drop down to
appear even on moving cursor from the specified element.How can I achieve
this?

Answer 1

Because you have applied display:block code to #HeaderBar hover and when your cursor goes to dropdown the hover code does not run.
So apply display:block on .SampleMenu ul:hover as well
#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
And also apply display:none to the .SampleMenu ul not each li elements of it.
Stack Snippet
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}
div.SampleMenu ul li {
color: White;
padding: 0;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
<div class="CentralHeader">
<div class="LinkBar" id="HeaderBar">All</div>
<div class="SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>