Php Avada主题-子菜单自定义
我刚开始在我的wordpress网站上使用。我需要定制左侧的菜单。子菜单中的项目应显示在父项目下方,而不是其旁边。我开始使用侧导航css样式,但无法使子项正常工作Php Avada主题-子菜单自定义,php,html,css,wordpress,themes,Php,Html,Css,Wordpress,Themes,我刚开始在我的wordpress网站上使用。我需要定制左侧的菜单。子菜单中的项目应显示在父项目下方,而不是其旁边。我开始使用侧导航css样式,但无法使子项正常工作 .side-nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ededed; margin-bottom: 20px; } .side-nav ul { list-style: none; margin: 0; p
.side-nav {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #ededed;
margin-bottom: 20px;
}
.side-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-nav li {
margin: 0;
padding: 0;
}
.side-nav li a {
border-bottom: 1px solid #ededed;
display: block;
height: auto;
font-weight: normal;
font: 14px/39px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
color: #333333;
}
.side-nav li a {
line-height: 1.69em;
padding: 8px 0;
}
.side-nav li a:hover {
background: none;
}
.side-nav li.current_page_item > a {
background: none;
color: #a0ce4e;
}
.side-nav li.current_page_item li a {
color: #333333;
border-bottom: 1px solid #ededed;
}
.side-nav .children {
display: none;
margin-left: 15px;
}
.side-nav .arrow {
display: inline;
margin-left: 0;
}
.side-nav .arrow:after {
position: absolute;
font-size: 14px;
font-family: IcoMoon;
}
.side-nav-left .side-nav {
border-right: 1px solid #ededed;
}
.side-nav-left .side-nav li.current_page_item > a {
border-right: 3px solid #a0ce4e;
}
.side-nav-left .side-nav .arrow {
margin-left: 10px;
}
.side-nav-left .side-nav .arrow:after {
content: '\f105';
}
.side-nav-right .side-nav {
border-left: 1px solid #ededed;
}
.side-nav-right .side-nav li.current_page_item > a {
padding-left: 23px;
border-left: 3px solid #a0ce4e;
}
.side-nav-right .side-nav li a {
padding-left: 25px;
}
.side-nav-right .side-nav .arrow {
margin-right: 10px;
}
.side-nav-right .side-nav .arrow:after {
content: '\f104';
}
.side-nav-right .side-nav .children {
margin-left: 40px;
}
.side-nav-right .side-nav .children a {
padding-left: 0;
}
为了更好地理解,这里是我尝试构建的屏幕截图。
左侧的图像显示菜单/子菜单的当前样式。右边的图片显示了Avada附带的侧导航模板。开箱即用,无法使用主菜单中的侧导航样式。我已经在主题Fursion论坛上发布了一个问题,但他们无法帮助我。也许你能给我一个提示。
谢谢要实现此效果,您必须将子菜单列表的位置从
绝对
更改为相对
,并对其进行一些调整,例如:
body.side-header-left #side-header #nav > ul > li > ul.sub-menu {
position: relative;
right: auto;
left: auto;
top: auto;
visibility: visible;
opacity: 1;
width: 100%;
height: 0;
overflow:hidden;
}
body.side-header-left #side-header #nav > ul > li:hover > ul.sub-menu,
body.side-header-left #side-header #nav > ul > li.current_page_item > ul.sub-menu {
height: auto;
}
谢谢-工作起来很有魅力!到目前为止,子菜单始终可见,您知道我如何在悬停或单击时展开它吗?工作非常完美-非常感谢!还有一个问题-当当前页面是子菜单项时,是否可以显示展开的子菜单?