我如何更改 superfish 冷冻导航菜单字体颜色

发布于 2024-11-05 04:50:20 字数 3775 浏览 5 评论 0原文

我是使用 superfish 模块创建这个菜单的,我试图更改冷冻菜单的字体颜色以使其与父字体颜色不同。我试图使用 firebug 做一些事情,并且花了更多时间尝试编辑 css 样式,但找不到它与导航菜单字体颜色的确切类别。 在我使用的样式下有一个名为 .sf-menu.sf-style-pomegranate.sf-navbar a { 的类是 pomegranate.css 当我更改此颜色时,父项和冷冻颜色都会更改

演示: http:// /users.tpg.com.au/j_birch/plugins/superfish/#sample4 我正在使用的风格

.sf-menu.sf-style-pomegranate {
  float: left;
  margin-bottom: 1em;
  padding: 0;
}
.sf-menu.sf-style-pomegranate.sf-navbar {
  width: 100%;
}
.sf-menu.sf-style-pomegranate ul {
  padding-left: 0;
}
.sf-menu.sf-style-pomegranate a {
  border: 1px outset #68000e;
  color: #ffebee;
  padding: 0.75em 1em;
  white-space: nowrap;
}
.sf-menu.sf-style-pomegranate a.sf-with-ul {
  padding-right: 2.25em;
}
.sf-menu.sf-style-pomegranate.rtl a.sf-with-ul {
  padding-left: 2.25em;
  padding-right: 1em;
}
.sf-menu.sf-style-pomegranate.sf-navbar a {
  border: 0;
  padding-right: 30px;
  text-decoration: none;
  padding-top: 5px;
}
.sf-menu.sf-style-pomegranate span.sf-description {
  color: #13a;
  display: block;
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 5px 0 0 5px;
  padding: 0;
}
.sf-menu.sf-style-pomegranate li,
.sf-menu.sf-style-pomegranate.sf-navbar {
  background-image: url(../images/topmenu.gif);
  background-repeat: repeat-x;
  background-color: #A60405; 
  text-decoration: none;  
  height: 30px;
  }
.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
}
.sf-menu.sf-style-pomegranate li li li {
  background: #5f0016;
}
.sf-menu.sf-style-pomegranate li:hover,
.sf-menu.sf-style-pomegranate li.sfHover,
.sf-menu.sf-style-pomegranate li.active a,
.sf-menu.sf-style-pomegranate a:focus,
.sf-menu.sf-style-pomegranate a:hover,
.sf-menu.sf-style-pomegranate a:active,
.sf-menu.sf-style-pomegranate.sf-navbar li li {
  background-image: url(../images/menu2.gif); 
  background-color: #E6E4E4;
  background-repeat: repeat-x;
  color: #C80F0F;
}
.sf-menu.sf-style-pomegranate.sf-navbar li ul {
  background-image: url(../images/menu2.gif);
  background-color: #E6E4E4;
  background-repeat: repeat-x;
}
.sf-menu.sf-style-pomegranate.sf-navbar li ul li ul {
  background-color: transparent;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol li {
        margin: 0;
        padding: 0;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
        font-weight: bold;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
        display: inline;
        float: left;
        width: 12em;
}
.sf-menu.sf-style-pomegranate.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
        float: right;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-1 ul.sf-megamenu {
        width: 12em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-2 ul.sf-megamenu {
        width: 24em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-3 ul.sf-megamenu {
        width: 36em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-4 ul.sf-megamenu {
        width: 48em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-5 ul.sf-megamenu {
        width: 60em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-6 ul.sf-megamenu {
        width: 72em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-7 ul.sf-megamenu {
        width: 84em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-8 ul.sf-megamenu {
        width: 96em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-9 ul.sf-megamenu {
        width: 108em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-10 ul.sf-megamenu {
        width: 120em;
}

I was created this menu using superfish module and i was tying to change the chilled menus font-color to make different from the parent font-color. i wast trying to do something using firebug and I spending more time to trying to edit the css style but can't found it the exact class of the nav-menu font color.
there is a class called .sf-menu.sf-style-pomegranate.sf-navbar a { under the style I'm using is pomegranate.css
when I change this color the parent and the chilled color are changed

Demo : http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
style I'm using

.sf-menu.sf-style-pomegranate {
  float: left;
  margin-bottom: 1em;
  padding: 0;
}
.sf-menu.sf-style-pomegranate.sf-navbar {
  width: 100%;
}
.sf-menu.sf-style-pomegranate ul {
  padding-left: 0;
}
.sf-menu.sf-style-pomegranate a {
  border: 1px outset #68000e;
  color: #ffebee;
  padding: 0.75em 1em;
  white-space: nowrap;
}
.sf-menu.sf-style-pomegranate a.sf-with-ul {
  padding-right: 2.25em;
}
.sf-menu.sf-style-pomegranate.rtl a.sf-with-ul {
  padding-left: 2.25em;
  padding-right: 1em;
}
.sf-menu.sf-style-pomegranate.sf-navbar a {
  border: 0;
  padding-right: 30px;
  text-decoration: none;
  padding-top: 5px;
}
.sf-menu.sf-style-pomegranate span.sf-description {
  color: #13a;
  display: block;
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 5px 0 0 5px;
  padding: 0;
}
.sf-menu.sf-style-pomegranate li,
.sf-menu.sf-style-pomegranate.sf-navbar {
  background-image: url(../images/topmenu.gif);
  background-repeat: repeat-x;
  background-color: #A60405; 
  text-decoration: none;  
  height: 30px;
  }
.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
}
.sf-menu.sf-style-pomegranate li li li {
  background: #5f0016;
}
.sf-menu.sf-style-pomegranate li:hover,
.sf-menu.sf-style-pomegranate li.sfHover,
.sf-menu.sf-style-pomegranate li.active a,
.sf-menu.sf-style-pomegranate a:focus,
.sf-menu.sf-style-pomegranate a:hover,
.sf-menu.sf-style-pomegranate a:active,
.sf-menu.sf-style-pomegranate.sf-navbar li li {
  background-image: url(../images/menu2.gif); 
  background-color: #E6E4E4;
  background-repeat: repeat-x;
  color: #C80F0F;
}
.sf-menu.sf-style-pomegranate.sf-navbar li ul {
  background-image: url(../images/menu2.gif);
  background-color: #E6E4E4;
  background-repeat: repeat-x;
}
.sf-menu.sf-style-pomegranate.sf-navbar li ul li ul {
  background-color: transparent;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol li {
        margin: 0;
        padding: 0;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
        font-weight: bold;
}
.sf-menu.sf-style-pomegranate ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
        display: inline;
        float: left;
        width: 12em;
}
.sf-menu.sf-style-pomegranate.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
        float: right;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-1 ul.sf-megamenu {
        width: 12em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-2 ul.sf-megamenu {
        width: 24em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-3 ul.sf-megamenu {
        width: 36em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-4 ul.sf-megamenu {
        width: 48em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-5 ul.sf-megamenu {
        width: 60em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-6 ul.sf-megamenu {
        width: 72em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-7 ul.sf-megamenu {
        width: 84em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-8 ul.sf-megamenu {
        width: 96em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-9 ul.sf-megamenu {
        width: 108em;
}
.sf-menu.sf-style-pomegranate li.sf-parent-children-10 ul.sf-megamenu {
        width: 120em;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

万劫不复 2024-11-12 04:50:20

如果没有看到你的 html 标记,你似乎想要添加颜色:

.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
}

它将变成:

.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
  color: #ff0000;
}

Without seeing your html markup, it seems like you'd want to add color to:

.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
}

which would become:

.sf-menu.sf-style-pomegranate li li{
  background: #6c0019;
  color: #ff0000;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文