I am encountering an issue with my vertical hover menu. Even when I don't actually hover over any buttons, but the cursor is slightly to the right of them, the submenu pops up. Additionally, when there isn't a submenu, the main menu button starts flickering. I'm unsure of the cause behind this behavior. See this link for visual reference.
UPDATE: Thank you for the feedback received so far! I've managed to resolve the initial problem, but now I'm facing a similar yet different issue. A bar is sticking out of the menu and submenus are still opening without requiring a direct hover over the parent menu. An image illustrating this can be found here.
Below is the HTML code:
<div id="divMenu">
<ul>
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a>
<ul>
<li><a href="#">Homed</a></li>
<li><a href="#">Homee</a></li>
<li><a href="#">Homef</a></li>
</ul></li>
<li><a href="#">Home3</a>
<ul>
<li><a href="#">Homeg</a></li>
<li><a href="#">Homeh</a></li>
<li><a href="#">Homei</a></li>
</ul></li>
<li><a href="#">Home4</a></li>
<li><a href="#">Home5</a>
<ul>
<li><a href="#">Homej</a></li>
<li><a href="#">Homek</a></li>
<li><a href="#">Homel</a></li>
</ul></li>
<li><a href="#">Home6</a></li>
</ul>
</div>
And here is the associated 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>