Jquery 菜单栏下拉菜单从背景抓取文本

最近，为了支持触摸设备，我为菜单栏添加了响应式下拉菜单，但我遇到了一个有趣的问题，无法找出根本原因。基本上，下拉列表看起来是透明的，它受内容部分中后台提要文章的文本的影响。似乎该下拉列表读取的是背景文本标题，因为如果我将鼠标悬停在该文本上，该下拉列表将关闭，好像它认为我正试图将焦点转移到标题上

#导航{
显示：块；
光标：指针；
背景色：#4085C6；
填充：6px；
颜色：#000；
文字装饰：无；
边框顶部颜色：#4085C6；
右边框颜色：#4085C6；
边框底色：#4085C6；
左边框颜色：#4085C6；
边际：0px；
宽度：960px；
}
#导航>a{
显示：无；
}	
#李海军{
位置：相对位置；
}
#李娜
{
颜色：#fff；
显示：块；
}
#导航李a：活动
{
背景色：#c00！重要；
}
#导航跨度：后
{
宽度：0；
身高：0；
边框：0.313em实心透明；/*5*/
边框底部：无；
边框顶部颜色：#4086C4；
内容：''；
垂直对齐：中间对齐；
显示：内联块；
位置：相对位置；
右侧：-0.313em；/*5*/
}
/*一级*/
#导航>ul{
高度：3.75em；
背景色：#4086C4；
列表样式类型：无；
}
#导航>ul>li{
宽度：157px；
浮动：左；
}
#导航>ul>li>a{
身高：100%；
字号：1.5em；
线高：2.5em；
文本对齐：居中；
文字装饰：无；
}
#nav>ul>li:不是（：最后一个孩子）>a{
右边框宽度：8px；
右边框颜色：#3779b3；
右边框样式：实心；
}
#导航>ul>li:悬停>a，
#导航>ul:非（：悬停）>li.active>a{
背景色：#3779b3；
颜色：#FFF；
列表样式类型：无；
}
/*二级*/
#纳夫利乌尔{
背景色：#3779b3；
显示：无；
位置：绝对位置；
最高：100%；
宽度：20em；
列表样式类型：无；
}
#李海军：悬停{
显示：块；
左：0；
右：0；
}
#导航李：不是（：第一个孩子）：悬停ul{
左：-1px；
}
#纳夫利乌拉酒店{
字号：1.25em；
边框顶部：1px实心#4086C4；
填充：0.75em；
文字装饰：无；
}
#导航李：悬停，
#导航li ul:不（：悬停）li.active a{
背景色：#4086C4；
列表样式类型：无；
}
@仅介质屏幕和（最大宽度：62.5em）/*1000*/
{
#导航{
宽度：100%；
位置：静态；
盒影：6px 6px#4785C6；
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
轮廓颜色：#4086C4；
轮廓样式：实心；
背景色：#4086C4；
颜色：#4086C4；
填充：0px；
边框顶部颜色：#4086C4；
右边框颜色：#4086C4；
边框底色：#4086C4；
左边框颜色：#4086C4；
}
}
@仅介质屏幕和（最大宽度：40em）/*640*/
{
html{
字体大小：75%；/*12*/
}
#导航{
位置：相对位置；
顶部：自动；
左：自动；
}
#导航>a{
宽度：3.125em；
高度：3.125em；
文本对齐：左对齐；
文本缩进：-9999px；
背景色：#4086C4；
位置：相对位置；
}
#导航>答：之前，
#导航>a:之后{
位置：绝对位置；
边框：2倍实心#fff；
最高：35%；
左：25%；
右：25%；
内容：''；
}
#导航>a:之后{
最高：60%；
}
#导航：非（：目标）>a:第一种类型，
#导航：目标>a：类型的最后一个{
显示：块；
}
/*一级*/
#导航>ul{
高度：自动；
显示：无；
位置：绝对位置；
左：0；
右：0；
}
#导航：目标>ul{
显示：块；
}
#导航>ul>li{
宽度：100%；
浮动：无；
}
#导航>ul>li>a{
高度：自动；
文本对齐：左对齐；
填充：0.833em；
}
#nav>ul>li:不是（：最后一个孩子）>a{
边界权：无；
边框底部：1px实心#3779b3；
}
/*二级*/
#纳夫利乌尔{
位置：静态；
填充：1.25em；
填充顶部：0；
}
}

您应该在CSS中使用z-index属性

#nav li ul {
    background-color: #3779b3;
    display: none;
    position: absolute;
    top: 100%;
    width: 20em;
    list-style-type: none;
    z-index: 1;
}