子页面上的当前页面突出显示

Question

我正在尝试在类似于本网站的 wordpress 上实现当前页面高亮显示 Alex Soth。

我的 css 已经快到了。

目前我在页面上有当前页面亮点，即。家，日历，项目。但是，当谈到子页面上的当前页面亮点时，我遇到了问题。

选择子页面时，缩进的子页面列表出现在悬停的悬停，但是页面选择后，菜单还原回标准页菜单，没有可见的儿童菜单？与指向 Alex Soth 站点的链接不同，在该链接中扩展菜单保持不变，当前页面突出显示

我知道答案将是一段简单的 CSS，涉及 current_page_item 和可能的 position:relative 以获得选择后保持可见的菜单。但我可以用我的一生来解决它。

我在下面附上了我相关的 css 的任何想法？？

谢谢

/* =Link Styles
------------------------------------------------------------------*/

input#submit {
 cursor: pointer;
}

input#searchsubmit {
  background: url(images/search.png) no-repeat center;
}

input#searchsubmit:hover {
  background: url(images/search.png) no-repeat center #3399FF !important;
  cursor: pointer;
}

.navigation a:hover, input#submit {
 background: #3399FF;
 color: #3399FF !important;
}

a {
 color: #666;
}

a:hover, a:hover span {
  color: #c11501 !important;background-color: #fae100;
}

.entry sup a,
#main_nav .current_page_item a,
#main_nav .current_page_ancestor a
{
  color: #666 !important;
 }

#main_nav h1.masthead a {
 color: #666;
}

#main_nav h1.masthead a:hover {
 border-right: none;
}

h2 a, #main_nav a {
 color: #3399FF;
}

img a, img a:hover {
 text-decoration: none;
}

.post a, .navigation a {
 font-weight: bold;
  color: #000;
}

.navigation a {
  background: #EEE;
  color: #666;
  font-weight: normal;
  padding: 3px 0px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
 }

.post sup {
 font-size: 11px;
  color: #aaa;
}

.post sup a {
 border: 0;
 margin: 0;
 font-weight: normal;
 font-size: 10px;
}

#supplementary .post_nav ul.about_nav li a, #supplementary .post_nav ul.single_post_meta             a, #supplementary ul.contact_key li a {
 color: #888888;
 border-bottom: 0;
}



    /* =Main Menu
------------------------------------------------------------------*/

#main_nav ul.menu li {
  position: relative;



}

#main_nav ul.menu li:hover ul.sub-menu,
#main_nav ul.menu li:hover ul.children {
 display: block;



}

Answer 1

如果您使用的是 wp_list_pages，您将自动将“current_page_parent”作为类插入到首页 html 中，例如：

<li class="page_item current_page_parent">
<a href="#">page</a>
<ul>...</ul>
</li>