【问题标题】:Current Menu Colour CSS Navigation当前菜单颜色 CSS 导航
【发布时间】:2017-03-23 17:07:04
【问题描述】:

我在使用当前菜单项时遇到问题,并且它们没有显示正确的颜色。

页面在这里:http://new.leicesterymca.co.uk/youth-community/our-work/youth-homelessness/ 我遇到的麻烦在于左侧边栏中的导航。

青年无家可归 ——野心

我们在“青年无家可归者”页面上,因此“野心”菜单项不应该是与青年无家可归者相同的深蓝色。应该是#8fa9ba(浅蓝色)。

如果你点击 Ambition 页面,这两个实际上会按我想要的方式显示...

我正在使用的 CSS 在这里:

/* ------ Menu Level 3 -------*/



.sub-nav-left {
  margin:68px 0 0 0;
  padding:0;
  font-weight: bold;
}

.sub-nav-left a {
  text-decoration: none;
  color: #2f9395;
}

.sub-nav-left a:hover {
  color: #163a52;
}

.sub-nav-left  ul {
  width: 95%;
  margin: 0;
  padding: 0;
}

.sub-nav-left li {
  margin: 0 0 0 0;
  padding: 10px 0 10px 0;
  text-indent: 0;
  border-bottom: 1px solid #e9eaeb;
}

.sub-nav-left li:before {
  content: none;
}

.sub-nav-left li:last-child {
  border-bottom: none;
}

.sub-nav-left .sub-menu li {
  text-indent: 20px;
  padding: 5px 0 0 0;
  border: none;
}

.sub-nav-left .sub-menu a {
  color: #9fcac7;
}

.sub-nav-left .sub-menu a:hover {
  color: #8fa9ba;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 */


/* This styles the top level parent item */
.sub-nav-left .current-menu-parent > a {
  color: #163a52;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}

/* This styles the sub menu */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 - Sub */


/* This styles the top level parent item */
.sub-nav-left .sub-menu .current-menu-parent > a {
  color: #8fa9ba;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

/* This styles the sub menu */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

【问题讨论】:

    标签: html css navigation currentitem


    【解决方案1】:

    较深的颜色 (#163a52) 应该只适用于 .current-item 的直接死者,对吧?如果是这样,您可以将选择器更改为:

    .sub-nav-left .current-menu-item > a 而不是.sub-nav-left .current-menu-item a

    【讨论】:

    • 抱歉,我可能遗漏了一些东西,但那些选择器是一样的吗?较浅的颜色应适用于直系后代(Ambition),较深的颜色应适用于当前页面:)
    • 对此感到抱歉-我编辑了答案以使其更有意义。看起来您当前的 .sub-nav-left .current-menu-item a 样式正在向下级联到包含“Ambition”的嵌套菜单。
    • 太好了 - 非常感谢 - 设法调整并让它工作:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-12-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-04
    相关资源
    最近更新 更多