Html 子菜单的悬停菜单工作不正常

我有一个简单的垂直悬停菜单，即使我没有悬停在任何按钮上，但光标稍微偏右，它也会显示子菜单。当没有子菜单时，主菜单按钮开始闪烁。我不完全确定发生了什么以及为什么会发生。这就是我的意思

编辑：谢谢你的回复！现在我遇到了一个不同/几乎相同的问题。菜单不再奇怪了，但现在有一个突出的条，它仍然在打开子菜单，而不必将鼠标悬停在父菜单上。链接到图片

这是我的HTML

    <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>

还有我的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>

#divMenu{
边际：0px；
填充：0px；
}
#迪沃{
边际：0px；
填充：5px15px；
}
#divMenu li{
保证金：4倍；
填充：4px；
}
#李莉{
边际：0px；
填充：0px；
}
#divMenu{
宽度：150px；
高度：27px；
}
#迪沃{
线高：25px；
}
#divMenu li{
列表样式：无；
位置：相对位置；
背景：#000；
}
#李莉{
列表样式：无；
位置：相对位置；
背景：#000；
左：95px；
顶部：-30px；
}
#迪乌尔利阿酒店{
宽度：150px；
高度：25px；
填充物：5px 5px；
显示：内联块；
字母间距：6px；
文字装饰：无；
文本对齐：左对齐；
字体系列：流沙灯；
颜色：#ffffff；
边界：0px；
}
#二分菜单{
位置：绝对位置；
可见性：隐藏；
顶部：27px；
}
#divul li菜单：悬停ul{
能见度：可见；
}
#Divli：悬停{
背景色：#fff；
}
#Divul li菜单：悬停>a{
背景色：#fff；
颜色：#000；
}
#Diva菜单：悬停{
字体大小：正常；
颜色：#000；
}

这是由于应用于链接的宽度为零。你真的不需要

#divMenu ul li:hover > a {
    /*width: 0px;*/
    background-color: #fff;
    color: #000;
}

#divMenu a:hover {
    /*width: 0px;*/
    font-weight: normal;
    color: #000;
}

#div菜单{
边际：0px；
填充：0px；
}
#迪沃{
边际：0px；
填充：5px15px；
}
#divMenu li{
保证金：4倍；
填充：4px；
}
#李莉{
边际：0px；
填充：0px；
}
#divMenu{
宽度：150px；
高度：27px；
}
#迪沃{
线高：25px；
}
#divMenu li{
列表样式：无；
位置：相对位置；
背景：#000；
}
#李莉{
列表样式：无；
位置：相对位置；
背景：#000；
左：95px；
顶部：-30px；
}
#迪乌尔利阿酒店{
宽度：150px；
高度：25px；
填充物：5px 5px；
显示：内联块；
字母间距：6px；
文字装饰：无；
文本对齐：左对齐；
字体系列：流沙灯；
颜色：#ffffff；
边界：0px；
}
#二分菜单{
位置：绝对位置；
可见性：隐藏；
顶部：27px；
}
#divul li菜单：悬停ul{
能见度：可见；
}
#Divli：悬停{
背景色：#fff；
}
#Divul li菜单：悬停>a{
/*宽度：0px*/
背景色：#fff；
颜色：#000；
}
#Diva菜单：悬停{
/*宽度：0px*/
字体大小：正常；
颜色：#000；
}

只需将

宽度：0px

从样式中删除

#divMenu ul li:hover>a

和

#divMenu a:hover

。

块跳闸的问题是因为下面的块的宽度：

#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;
}

只要去掉这个宽度，它就会工作