我正在设置wordpress网站，使用ThemeForest中的
this template，这里是我目前正在工作的
live preview(现在应该工作 – 请让我知道，如果它不工作)。
我配置了CSS，所以当悬停的左边框将是浅灰色。然后，当点击链接时，左边框将是我选择的蓝色。
如下图所示，导航的主要问题是CSS。投资组合链接(图片中的投资组合部分)仍然具有所选择的类，以及内部无序列表项。我想让它看起来像图片中的博客部分，博客链接不再应用所选的类项目。
我问模板的创建者为什么发生这种情况？他的回应是需要在下面的另一个链接包含标题属性’allportfolio’，所以它将正常工作。我尝试将此属性添加到主要投资组合链接，但是完全关闭该列表。
当菜单创建时，浏览器以HTML形式创建投资组合选择：
<ul class="main-menu" id="menu-main-menu">
<li class="parent selected" id="menu-item-1172">
<p><a href="http://localhost/portfolio/" style="color: rgb(57,57,57);">Portfolio</a></p>
<div>
<ul class="sub-menu">
<li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
<li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
<li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
<li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
<li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">logos</a></p></li>
</ul>
</div>
</li>
我试图像this answer这样的东西，但没有工作，因为它似乎没有在列表项目中包含任何东西。以下jQuery代码是我的尝试：
/*Portfolio links remove selected CSS setting*/
$('ul#menu-main-menu ul.submenu li p a').click(
function(){
$('ul#menu-main-menu li').removeClass('parent selected');
$(this).addClass('parent menu-item');
});
我感到困惑，因为我无法弄清楚如何让HTML看起来像下面(取出CSS类’selected’并添加CSS类’menu-item’)：
<ul class="main-menu" id="menu-main-menu">
<li class="parent menu-item" id="menu-item-1172">
<p><a href="http://localhost/portfolio/" style="color: rgb(57,57);">Portfolio</a></p>
<div>
<ul class="sub-menu">
<li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
<li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
<li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
<li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
<li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">logos</a></p></li>
</ul>
</div>
</li>
更新：@limelights的答案似乎有效，但是我发现一些影响网站链接悬停效果的jQuery，并不确定这是否是代码不能正常工作的原因是scripts.js文件wordpress模板
/* Links roll over effect */
$('a').each(function(){
if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
$(this).hoverFadeColor();
})
此外，我非常接近我想要完成的，使用这段代码来最终保持内部链接的打开：
/*Portfolio links remove selected CSS setting*/
$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
function(){
$('ul#menu-main-menu > li').removeClass('selected');
$('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
$('ul#menu-main-menu li div:first').show();
});
但是，它仍然在做什么(如下所示)，它仍然具有如所选文本所选择的文本。
任何帮助是极大的赞赏！
解决方法
我在你的CSS中做了小的改动，并在你的HTML页面中添加了一些jquery函数，如下所示：
Css更改：
在您的custom.css中找到第67行，并按如下所示替换代码，
/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
background:#FFF;
border-left:6px solid #F0F0F0;
}
这上面一个替换成
/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
background:#FFF;
/*border-left:6px solid #F0F0F0;*/
}
<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
$(this).addClass("selected");
});
});
</script>
以上这些变化正在为我工作，要看到它在行动中：http://jsbin.com/ehagal/1
我认为这可能会帮助您解决问题。
