Html CSS 3子菜单在悬停时不可见

我一直在努力创建一个HTML/CSS菜单。我的布局和一切看起来都很棒，唯一的一点是每次我离开父菜单时，子菜单都会消失。我环顾了一下为什么会发生这种情况的各种原因，最常见的原因似乎是鼠标移动时某些元素会聚焦，但是我从上到下浏览了我的代码，找不到可能发生这种情况的地方。任何提示和/或编码错误，请让我知道

HTML

---

谢谢大家抽出时间。

添加

！重要信息

像这样

#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
             z-index: 503;
             display: block !important;                        
 }

---

不确定，如果我理解你想要的颜色模式。我不敢改变你的想法

@font-face{
字体系列：连续体；
src:url（“/fonts/continuum/continuum.ttf”）；
}
阀体，分区，h1，h2，h3，p，收割台{
边距：0；填充：0；边框：0；
}
身体{
文本对齐：居中；
}
标题{
位置：固定；
z指数：500；
高度：100px；
背景：#FFFFFF；
#背景#008C9E；
#背景#44749D；
宽度：100%；
对齐内容：居中对齐；
}
#菜单条{
位置：固定；
z指数：58；
高度：30px；
宽度：100%；
#背景：#000000；
背景#343838；
}
#菜单条{
位置：绝对位置；
字体系列：连续体；
颜色：#ffffff；
列表样式类型：无；
保证金：0；
填充：0；
}
#菜单{
右：0；
z指数：501；
}
#菜单{
显示：内联块；
浮动：左；
右边距：1px；
}
#菜单{
显示：块；
最小宽度：100px；
高度：30px；
文本对齐：居中；
线高：30px；
字体系列：连续体；
颜色：#fff；
背景#343838；
文字装饰：无；
}
#菜单：将鼠标悬停在a上{
背景#f5f1e9；
颜色：#343838；
}
#菜单：将鼠标悬停在a上{
背景#343838；
颜色：#f5f1e9；
}
#菜单{
显示：无；
}
#菜单条li：悬停ul{
显示：块；
}
#菜单{
显示：块；
浮动：无；
}
#菜单{
宽度：自动；
最小宽度：155px；
填充：0 20px；
}
#收割台包装器{
#位置：固定；
位置：相对位置；
边缘顶端：31像素；
高度：70像素；
左边距：自动；
右边距：自动；
宽度：960px；
}
收割台h1{
位置：相对位置；
字体系列：连续体；
利润上限：-56px；
左边距：-500px；
}
#顶部标志{
位置：相对位置；
利润上限：4倍；
高度：60px；
左边距：-900px；
}
#横幅{
位置：固定；
宽度：100%；
高度：300px；
顶部：100px；
#背景：#00B4CC；
#背景:#CCEBF1；
背景#f5f1e9；
}

我的测试站点








内容在这里

这是页脚

更改此行

#menu_strip ul li a:hover + .hidden_menu

到

@font-face{
字体系列：连续体；
src:url（“/fonts/continuum/continuum.ttf”）；
}
身体，
分区，
h1，
h2，
h3，
P
标题{
保证金：0；
填充：0；
边界：0；
}
身体{
文本对齐：居中；
}
标题{
位置：固定；
z指数：500；
高度：100px；
背景：#FFFFFF；
#背景#008C9E；
#背景#44749D；
宽度：100%；
对齐内容：居中对齐；
}
#菜单条{
位置：固定；
z指数：58；
高度：30px；
宽度：100%；
#背景：#000000；
背景#343838；
}
#菜单条{
位置：绝对位置；
字体系列：连续体；
颜色：#ffffff；
列表样式类型：无；
保证金：0；
填充：0；
}
#菜单{
右：0；
z指数：501；
}
#菜单{
显示：内联块；
浮动：左；
右边距：1px；
}
#菜单{
显示：块；
最小宽度：100px；
高度：30px；
文本对齐：居中；
线高：30px；
字体系列：连续体；
颜色：#fff；
背景#343838；
文字装饰：无；
}
#菜单：将鼠标悬停在a上{
背景#f5f1e9；
颜色：#343838；
}
#菜单：将鼠标悬停在ul a上{
背景:#f3；
颜色：#2f3036；
高度：30px；
线高：30px；
}
#菜单_stripli:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
#菜单{
显示：无；
}
#菜单{
显示：块；
浮动：无；
}
#菜单{
宽度：自动；
最小宽度：155px；
填充：0 20px；
}
#菜单：悬停。隐藏菜单，
.隐藏菜单：悬停{
z指数：503；
显示：块；
}
#收割台包装器{
#位置：固定；
位置：相对位置；
边缘顶端：31像素；
高度：70像素；
左边距：自动；
右边距：自动；
宽度：960px；
}
收割台h1{
位置：相对位置；
字体系列：连续体；
利润上限：-56px；
左边距：-500px；
}
#顶部标志{
位置：相对位置；
利润上限：4倍；
高度：60px；
左边距：-900px；
}
#横幅{
位置：固定；
宽度：100%；
高度：300px；
顶部：100px；
#背景：#00B4CC；
#背景:#CCEBF1；
背景#f5f1e9；
}

我的测试站点
#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
             z-index: 503;
             display: block !important;                        
 }

#menu_strip ul li a:hover + .hidden_menu

#menu_strip ul li:hover .hidden_menu