Question

我试图在wordpress上实现类似于此网站的当前页面突出显示 Alex Soth。

我和我的css差不多了。

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

在选择子页面时，缩进的子页面列表会在悬停时显示，但在页面选择后，菜单将恢复为标准页面菜单而没有可见的子菜单？与Alex Soth站点的链接不同，扩展菜单保留并且当前页面突出显示

我知道答案将是一个简单的css，涉及current_page_item和可能的位置：相对于选择后获得菜单保持可见。但是我可以为我的生活做好准备。

任何想法我都附上了我的重要文件？

感谢

/* =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，则会在首页html上自动插入“current_page_parent”作为类，例如：

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

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

1 个答案: