如何为导航/菜单栏指定不同的背景颜色？ [英] How can I give the Nav/Menu Bar a different backgroud color?

问题描述

在这个小提琴，我在导航栏中有一个菜单栏（ul） 。菜单项的悬停颜色现在还可以，但我希望整个菜单栏（导航）的颜色与浅黄色背景颜色不同（也许是forestgreen）。



我已经尝试为CSS中的nav元素分配颜色，背景和背景颜色，但它没有做我想要的（后两个似乎什么都不做）。



如何将菜单栏/导航栏的背景颜色设置为从页面的其余部分设置？

At this fiddle, I've got a menu bar (ul) in a nav. The hovering colors of the menu items are okay for now, but I want the entire "menu bar" (nav) to have a different color than the lightyellow background (forestgreen, perhaps).

I've tried assigning color, background, and background-color to the nav element in the CSS, but it doesn't do what I want (the latter two seem to do nothing).

How can I give my menu bar/nav a background color to set it off from the rest of the page?

推荐答案

哦，我明白了。问题非常简单：你为 nav 元素的背景着色，但它的子项填充了所有背景，以及该元素的背景颜色（顶级 ul ）根据 class =top-level-menu覆盖颜色。反过来，顶级 li 元素的集合，顶级 ul 的子元素也填写所有元素其父级的背景空间，因此也不可见其背景。并且只有当您更改顶级 li 元素，计划，作业/位置，工人，规则和帮助的背景时'，你会看到背景的差异。例如，您可以为这些 li 元素中的每一个添加另一个类。



我明白，它可能听起来与您最初想法修改仅一个元素的样式相比，并不是非常优化，但这只是您创建或使用的设计。无论如何，为这5个元素添加一个新类将是这种情况中最小的变化。 （无论如何，你的元素已经有很多属性。特别是，为什么你有 name 属性，如果你已经有 id ，当然，菜单不是形式，或者，在所有情况下，菜单项都不会与某些表单的数据一起提交，否则这将是唯一的原因拥有 name 属性。）



所以，这是最简单的即时修复。我刚尝试过。也许你可以尝试半透明的颜色，然后父母的背景颜色可以与儿童的背景颜色混合。或者你可以以某种方式改变整个设计。顺便说一句，你需要大量的风格改进。例如，所有项目看起来都很丑，因为它们的文本被按压在元素的边界矩形的左边缘，可以使用 padding 来修复。等等...

-SA

Oh, I got it. The problem is pretty simple: you color the background of nav element, but its child fills all the background, and the background color of this element (top-level ul) overrides the color according to its class="top-level-menu". In turn, the set of top-level li elements, children of your top-level ul, also fills in all the background space of its parent, so changing its background is also not visible. And only if you change the background of the set of top-level li elements, 'Schedules', 'Job/Locations', 'Workers', 'Rules' and 'Help', you will see the difference in background. For example, you can add another class to each of these li elements.

I understand, it may sound not very optimal, compared to you initial idea to modify the style of only one element, but this just the design you created or used. Anyway, adding a new class for these 5 elements will be the smallest change in this situation. (Anyway, your elements already have a lot of attributes. In particular, why having name attributes if you already have id, and, of course, menu is not in a form, or, in all cases, menu items would not be submitted with some form's data, which would otherwise be the only reason to have name attributes.)

So, this is the simplest immediate fix. I just tried it. Perhaps you can try semi-transparent colors, then background colors of parents could mix with background colors of children. Or you could change the whole design somehow. By the way, you will need a hole lot of style improvements. For example, all items look ugly because their texts are pressed against the left edges of the elements' bounding rectangle, which can be fixed using padding. And so on…

—SA

这篇关于如何为导航/菜单栏指定不同的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！