Question

我试图搜索这个，但我想我的问题是错误的。我想要做的是，如果用户正在查看该页面，则会出现子菜单。有点类似于下拉菜单，但我希望显示您是否在当前页面上，而不是悬停效果，可能使用.current-menu-item函数？

这是我目前的代码：

.header-menu {
    width: 100%;
}

.header-menu li {
    background: url("images/arrow.png") no-repeat left center;
    height: 40px;
    margin: 0;
    padding-left: 15px;
    line-height: 40px;
    -webkit-transition:background-position .3s ease-in;  
    -moz-transition:background-position .3s ease-in;  
    -o-transition:background-position .3s ease-in;  
    transition:background-position .3s ease-in; 
}

.header-menu li:hover {
    background: rgba(31, 73, 125, 0.8) url("images/arrow-hover.png") no-repeat left center;
}

.header-menu li a {
    display: block;
    margin: 0 5px;
    font-size: 18px;
}

.header-menu ul.sub-menu {
    display: none;
}

.header-menu .current-menu-item {
    background: rgba(31, 73, 125, 0.8) url("images/arrow-hover.png") no-repeat right center;
}

老实说，我无法想出一种方法来实现它，它有点像CSS的if / else语句，我真的希望它现在存在。谢谢，任何帮助！如果能完成任务，我完全愿意使用JQuery。

修改

FIDDLE

Answer 1

使用

.header-menu .current-menu-item ul.sub-menu { 
 display:block;
}

和

.header-menu .current-menu-item{
 height:auto
}

删除重叠。

Fidddle： http://jsfiddle.net/ghnd4ae3/2/

WordPress显示当前页面子菜单

1 个答案: