Html 嵌套内部填充背景

Html 嵌套内部填充背景,html,css,Html,Css,有一个侧边栏菜单包含with,其中一些是另一个with。当我悬停到它上面时,它显示另一个。我现在面临的是,当我在屏幕上悬停并显示在屏幕上时。它全部用背景色填充。但是,我只需要先展示一下,其他的就不行了。示例包含在下面的图像中 第一张图片是我的尝试。第二张图片是我要找的 这是它的代码 /*菜单CSS*/cssmenu, cssmenu>ul{ 背景:urlmages/highlight-bg.png repeat; 垫底:3件; 字体系列:Verdana,日内瓦,塔荷马,无衬线; } cssme

有一个侧边栏菜单包含with,其中一些是另一个with。当我悬停到它上面时,它显示另一个。我现在面临的是,当我在屏幕上悬停并显示在屏幕上时。它全部用背景色填充。但是,我只需要先展示一下,其他的就不行了。示例包含在下面的图像中

第一张图片是我的尝试。第二张图片是我要找的

这是它的代码

/*菜单CSS*/cssmenu, cssmenu>ul{ 背景:urlmages/highlight-bg.png repeat; 垫底:3件; 字体系列:Verdana,日内瓦,塔荷马,无衬线; } cssmenu:之前, cssmenu:之后, cssmenu>ul:之前, cssmenu>ul:之后{ 内容:; 显示:表格; } cssmenu:之后, cssmenu>ul:之后{ 明确:两者皆有; } cssmenu{ 宽度:自动; 缩放:1; 宽度:100%; } cssmenu>ul{ 保证金:0; 填充:0; 位置:相对位置; 背景色:rgba0,0,0,0.7; } cssmenu>ul li{ 保证金:0; 填充:0; 列表样式:无; } cssmenu>ul>li{ 浮动:左; 位置:相对位置; 光标:指针; } cssmenu>ul>li>a{ 填充顶部:6px; 垫底:6px; 显示:块; 颜色:白色; 字体大小:13px; 文字装饰:无; 文本转换:大写; 线高:18px; } cssmenu>ul>li:悬停>a{ 背景:D6D6;/*旧浏览器*/ 背景:-moz线性梯度顶部,D60%,e56e1d 49%;/*FF3.6-15*/ 背景:-webkit线性梯度顶部,D60%,e56e1d 49%;/*Chrome10-25,Safari5.1-6*/ 背景:底部线性梯度,D60%,e56e1d 49%;/*W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/ 过滤器:progid:DXImageTransform.Microsoft.gradient startColorstr='D6D6',endColorstr='e56e1d',GradientType=0;/*IE6-9*/ } cssmenu>ul>li>a>span{ 线高:18px; 字体大小:12px; 右边框:rgb255、255、255、0.5实心1px; 右边填充:38px; 左侧填充:38px; } /* cssmenu>ul>li.active>a, cssmenu>ul>li>a:激活{ 背景色:rgba0,0,0,0.7; } */ /*孩子们*/ cssmenu>ul{ 不透明度:0; 可见性:隐藏; 位置:绝对位置; 保证金:0; 填充:0; z指数:-1; } cssmenu>ul li:悬停ul{ 不透明度:1; 能见度:可见; 保证金:0; 颜色:000; z指数:2; 左:0; } cssmenu>ul:之前{ 内容:; 位置:绝对位置; 顶部:-10px; 宽度:100%; 高度:20px; 背景:透明; } cssmenu>ul li{ 列表样式:无; 填充:0; 保证金:0; 宽度:100%; } cssmenu>ul li a{ 填充:6px26px; 背景色:e56e1d; 显示:块; 颜色:白色; 字体大小:13px; 文字装饰:无; 宽度:194px; 左边框:4px实心透明; } cssmenu>ul li a:悬停{ 背景色:ee974f; }
你应该只改变你想要定位的链接的背景,而不是同样包含子菜单的li标签

.sidebar > li > a {
  background-color: blue;
}
刚刚注意到,在CSS中,您的目标是链接,但链接颜色开始作为悬停颜色。。。这是一把小提琴:

您需要在选择器中编辑背景:

#cssmenu > ul ul li a {}
临时Incident列表项包括其中的嵌套ul。这意味着,当您将背景应用于li时,您也将为嵌套列表提供背景

为了使其符合您的预期结果,以下是两种合理的解决方案:

假设其宽度跨越整个导航,则将背景应用于该锚元素,而不是li。这是因为锚点标记不包装嵌套的ul。 给嵌套的ul一个灰色背景。这将覆盖蓝色渐变,并使其显示为您设计的预期效果。
这两种解决方案都有效。如果我是你,我会倾向于1,因为它稍微干净一点。但是,它确实要求您的锚定标记为全宽。但是,这对可用性来说可能更好,因为单击目标与导航的宽度相同。

在此处添加代码,以便我们可以帮助您。您需要类似于第一个cild选择器的东西。但是如果没有你的代码,我不能说它,如果你这样做怎么办li:hover>ul{background color:transparent;}最后一个答案不起作用请也包括你的CSS。我已经先发制人地重新投票,因为你已经表示愿意改进这个问题[谢谢你!]