Jquery 填充、边距和背景色赢得'；不要消失 背景

我正在尝试在其中一个选项中创建一个带有下拉菜单的固定导航栏。在较小的屏幕上，菜单覆盖将显示在屏幕中部垂直显示的所有选项。我不希望背景色/悬停在小屏幕版本中的任何链接上。导航背景应为

#fff

或

#111

，具体取决于您使用的主题（在移动菜单和导航中将“亮”更改为“暗”，以查看其他菜单主题）。屏幕宽度只是测试的占位符。我在JavaScript中留下了一些旧版本的残余内容（如

navList

）——对此很抱歉——请忽略这些内容

问题

• 子链接上的背景颜色以及背景悬停颜色不会消失
• 有子链接的链接太高，我似乎无法去掉它的填充/边距

我试过的 我已经试着用

* { background-color: transparent }

及

在我的小屏幕媒体查询的底部显示“无效”，以及在单个元素和/或元素类上重置这些属性

我也尝试过使用

var mobile=$（'.mobile菜单'）
var navList=$（'nav>ul'）
var winHeight
瓦多克
无功节流辊
滚动顶
var nav=$（'nav'）
var light=$（“.light”）
var dark=$（“.dark”）
var断点=600
var windowSize=0
var newWindowSize=0
var lightColor='#fff'
var darkColor='#111'
var scrollDiv=document.createElement（“div”）；
scrollDiv.className=“滚动条测量”；
document.body.appendChild（scrollDiv）；
var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth；
document.body.removeChild（scrollDiv）；
console.info（'Scrollbar:'+scrollbarWidth+'px'）
函数styleLightDark（）{
light.css({
“背景色”：浅色，
“颜色”：深色
})
dark.css({
“背景色”：深色，
“颜色”：浅色
})
}
函数styleMobileMenu（）{
if（mobile.hasClass（'light'））{
css（'background-color'，lightColor）
}否则{
css（'background-color'，darkColor）
}
}
函数styleNav（）{
if（$（'nav'）.hasClass（'light'））{
$（'nav'）.css（'background-color'，lightColor）
}否则{
$（'nav'）.css（'background-color'，darkColor）
}
}
函数remBg（）{
css（'background-color'，''）
css（'background-color'，''）
}
功能更改导航（x）{
如果（WindowsSize==“小”）{
if（x断点）{
法登导航（500）
}
}
}
函数检查窗口大小（x）{
if（x断点）{
NewWindowsSize='large'
}
}
函数getMeasurements（）{
var winHeight=$（窗口）.height（）
var docHeight=$（文档）.height（）
var trackLength=docHeight-winHeight
var innerWidth=$（文档）.width（）
var widthWithScrollbar=内部宽度+滚动条宽度
滚动的数量（）
console.info（'Width-scrollbar，如果存在：'+innerWidth+'px'））
如果（winHeight==8）{
检查窗口大小（内部宽度）
如果（WindowsSize！=新建WindowsSize）{
windowSize=newWindowSize
更改导航（内部宽度）
}
}否则{
选中窗口大小（带横线的宽度）
如果（WindowsSize！=新建WindowsSize）{
windowSize=newWindowSize
更改导航（带横杆的宽度）
}
}
}
函数amountScrolled（）{
scrollTop=$（窗口）.scrollTop（）
console.info（'Scrolled:'+scrollTop+'px'）
如果（（滚动顶部<5）和（&（内部宽度>断点））{
remBg（）
}如果（（滚动顶部<5）和&（导航为（':hidden'））和&（内部宽度断点））{
styleLightDark（）
}
}
getMeasurements（）
$（窗口）.on（'resize'，function（））{
getMeasurements（）
})
$（窗口）.on（'scroll'，function（）{
clearTimeout（throttleScroll）；
throttleScroll=setTimeout（函数（）{
滚动的数量（）
}, 10)
})
mobile.on（'click'，function（）{
scrollTop=$（窗口）.scrollTop（）
如果（导航为（':hidden'））{
法登导航（500）
remBg（）
styleNav（）
}如果（！nav.is（'：hidden'）&&（scrollTop>5））则为else{
导航衰减（500）
remBg（）
styleMobileMenu（）
}否则{
导航衰减（500）
remBg（）
}
})
正文{
背景颜色：浅蓝色；
利润率：50px0；
}
.手机菜单{
显示：无；
过渡：放松；
}
导航{
位置：固定；
宽度：100%；
排名：0；
不透明度：.9；
过渡：放松；
}
导航a{
浮动：左；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
填充：14px 16px；
}
导航黑暗a：悬停，
导航。黑暗。下拉：悬停。下拉按钮{
背景色：#fff；
颜色：#111；
}
导航灯a：悬停，
导航灯。下拉菜单：悬停。下拉菜单{
背景色：#111；
颜色：#fff；
}
.下拉内容{
显示：无；
位置：绝对位置；
z指数：1；
}
.下拉内容a{
浮动：无；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉：悬停.下拉内容{
显示：块；
}
#航行，
#资源,，
.资源{
显示：无；
}
.光*{
颜色：#111；
}
.黑暗*{
颜色：#fff；
}
.dark.下拉式内容{
背景色：#111；
}
.灯光.下拉式内容{
背景色：#fff；
}
.滚动条测量{
宽度：100px；
高度：100px；
溢出：滚动；
位置：绝对位置；
顶部：-9999px；
}
/*媒体查询*/
@介质（最大宽度：600px）{
.手机菜单{
显示：块；
位置：固定；
文本对齐：右对齐；
宽度：100%；
排名：0；
右：0；
光标：指针；
z指数：3；
高度：自动；
不透明度：.9；
对齐项目：居中；
填充：14px 16px；
溢出：隐藏；
}
导航{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
显示：无；
}
导航>分区{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
导航a，
.下拉列表，
#航行，
#资源,，
.资源，
.下拉内容a{
浮动：无；
显示：块；
文本对齐：居中；
* { padding: 0; margin: 0 }

@media screen and (max-width: 767px) {
  nav.light a:hover, nav.light .dropdown:hover .dropbtn {
      background-color: transparent;
      color: black;
  }
  .dropdown .dropbtn {
    padding: 0 16px;
  }
}