My drop down menu won't stay open on hover - html

Question

I am facing a problem whereby my drop down menu will not stay open when I hover my cursor over it. It sometimes stay open for a while and disappears. I have been trying to find solutions but I can't really tell what is the problem. Can anyone help me? I am new to CSS and HTML...
.arrow {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: 100px;
}
.menu-area ul {
text-transform: uppercase;
list-style: none;
width: 145px;
margin-left: 10px;
padding: 0px;
position: absolute;
display: block;
box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}
.menu-area ul ul {
margin-left: 1px;
position: absolute;
display: none;
left: 100%;
top: 0px;
}
.menu-area ul li {
border-bottom: 1px solid white;
background: MediumVioletRed;
position: relative;
display: block;
margin-bottom: 0px;
}
.menu-area ul li a {
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}
.menu-area ul li:hover {
background-color: hotpink;
}
.menu-area ul li:hover>ul {
display: block;
}
<div class="menu-area">
<ul>
<li>Home</li>
<li><a class="arrow" href="#">Soalan</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
<li><a class="arrow" href="#">Topic</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Answer 1

Youre adding margin-left: 1px; on .menu-area ul ul which makes a 1px gap between the main ul and your submenu ul. If you hit that gap (which is pretty hard as its only 1px but still possible) the submenu closes.
Remove the margin so the ul's "touch" each other without gap for a safe transition between menu and submenu (You can add the same spacing as padding so you keep the 1px gap). Apart from this 1px gap everything runs smoothly.
In general i would recommend adding https://github.com/kamens/jQuery-menu-aim tho so the menu doesnt close when trying to reach for the last submenu item (where you most likely move out of the main-ul which makes the menu close instantly).

Answer 2

The hover style is not applied because of that 1px gap to the child elements. You could remove that margin and set a transparent border on the child ul
.arrow {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: 100px;
}
.menu-area ul {
text-transform: uppercase;
list-style: none;
width: 145px;
margin-left: 10px;
padding: 0px;
position: absolute;
display: block;
box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}
.menu-area ul ul {
margin-left: 0;
border-left: 1px solid transparent;
position: absolute;
display: none;
left: 100%;
top: 0px;
}
.menu-area ul li {
border-bottom: 1px solid white;
background: MediumVioletRed;
position: relative;
display: block;
margin-bottom: 0px;
}
.menu-area ul li a {
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}
.menu-area ul li:hover {
background-color: hotpink;
}
.menu-area ul li:hover>ul,
.menu-area ul li>ul:hover {
display: block;
}
<div class="menu-area">
<ul>
<li>Home</li>
<li><a class="arrow" href="#">Soalan</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
<li><a class="arrow" href="#">Topic</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>