：hover没有将全部背景应用于li(:hover isn't applying full background to li)

：hover没有将全部背景应用于li(:hover isn't applying full background to li)

我的导航有下拉列表，其中有一个包装项目的标签。 当我将鼠标悬停在整个li上时，我想要应用悬停背景颜色。 现在它只适用于li，当我移开文本时，它是另一种背景颜色。

住在这里： http ： //stage.christinas-kitchen.com/

我正在“食谱”下工作，如果你看下它应该如何工作（我还没有包装在标签中）。

任何见解都表示赞赏。

My navigation has dropdowns, and within them there are a tags wrapping the items. I want the hover background color to be applied when I hover over that entire li. Right now it's only applying to the li, and when I move off the text it's the other background color.

Live here: http://stage.christinas-kitchen.com/

I'm working under "recipes", if you look under sprinkles that is how it should work (I have nothing wrapped in an a tag yet).

Any insight is appreciated.

最满意答案

样式表中的一种样式是

.nav ul li ul li a { background: #6ac4c2; display: block; color: #fff; text-decoration: none; }

那是你的问题; 因为a有自己的背景颜色，而a是li的子li ，所以改变li的背景颜色不会影响a的背景颜色。

您真的只想让li样式确定菜单项的背景颜色， 因此只需从该样式声明中删除background属性即可。 这样， a的背景将由父li决定，你的菜单应该按照你想要的方式工作

One of the styles in your stylesheet is

.nav ul li ul li a { background: #6ac4c2; display: block; color: #fff; text-decoration: none; }

That is your problem; since the a has its own background color, and the a is a child of the the li, changing the li's background color does not influence the a's background color.

You really just want the li styles to be determining the background color of your menu items, so just remove the background attribute from that style declaration. That way, the a's background will be dictated by the parent li, and your menus should work how you want them to