Hover menu not working properly for submenus - html

Question

I have a simple vertical hover menu and even when I don't hover over any buttons but the cursor is a little to the right of it, it shows the submenu. When there isn't a submenu the main menu button starts to flicker. I am not entirely sure what is going on and why it is happening. Here is link to show what I mean.
EDIT: Thank you for your responses! Now I'm having a different/almost same problem. The menu doesn't freak out any more, but now there's a bar that sticks out of it and it is still opening the submenus without having to hover over the parent menu. Link to picture here.
Here's my HTML
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>
And my CSS
<style type="text/css">
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
background-color: #fff;
color: #000;
}
#divMenu a:hover {
font-weight: normal;
color: #000;
}
</style>

Answer 1

Just remove width:0px from #divMenu ul li:hover > a and #divMenu a:hover from your style.

Answer 2

The problem of the block tripping is because of the width in the block underneath:
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
Just remove that width and it should work.

Answer 3

It's due to the zero width you're applying to the links. You really don't need that.
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
#divMenu {
margin: 0px;
padding: 0px;
}
#divMenu ul {
margin: 0px;
padding: 5px 15px;
}
#divMenu li {
margin: 4px;
padding: 4px;
}
#divMenu li li {
margin: 0px;
padding: 0px;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 25px;
}
#divMenu li {
list-style: none;
position: relative;
background: #000;
}
#divMenu li li {
list-style: none;
position: relative;
background: #000;
left: 95px;
top: -30px;
}
#divMenu ul li a {
width: 150px;
height: 25px;
padding: 5px 5px;
display: inline-block;
letter-spacing: 6px;
text-decoration: none;
text-align: left;
font-family: Quicksand Light;
color: #ffffff;
border: 0px;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #fff;
}
#divMenu ul li:hover > a {
/*width: 0px;*/
background-color: #fff;
color: #000;
}
#divMenu a:hover {
/*width: 0px;*/
font-weight: normal;
color: #000;
}
<div id="divMenu">
<ul>
<li>Home1</li>
<li>Home2
<ul>
<li>Homed</li>
<li>Homee</li>
<li>Homef</li>
</ul></li>
<li>Home3
<ul>
<li>Homeg</li>
<li>Homeh</li>
<li>Homei</li>
</ul></li>
<li>Home4</li>
<li>Home5
<ul>
<li>Homej</li>
<li>Homek</li>
<li>Homel</li>
</ul></li>
<li>Home6</li>
</ul>
</div>