BC .selected Fail
An investigation to dynamically styling BC's menu module. Attempts to consistently target and apply .fix-selected to 1st level .selected li while hovering in sub-menu proved fruitless. JS Fiddle proves JS is correct. BC's in-built JS is the cause of the issue.
by indieweb
HTML
<nav id="main-nav">
<div id="">
<ul id="">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li class="selected"><a href="">Events</a>
<ul id="">
<li><a href="">Local</a></li>
<li class="selected"><a href="">International</a></li>
</ul>
</li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</nav>
CSS
nav {
width: 460px;
height: 60px;
padding: 20px;
background-color: #333;
}
nav ul {
width: 460px;
height: 30px;
margin: 0px;
padding: 0px;
}
nav ul li {
position: relative;
display: inline-block;
float: left;
list-style-type: none;
height: 30px;
line-height: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
}
nav ul li:hover, nav ul li.selected {
background-color: #8FBC34;
}
nav ul li:hover a, nav ul li.selected a {
color: #FFF;
}
nav ul li a {
text-decoration: none;
font-family: 'Calibri', sans-serif;
font-size: 16px;
color: #C6C6C6;
}
nav ul li ul {
position: absolute;
top: 30px;
left: 0px;
width: 200px;
display: none;
padding-top: 2px;
}
nav ul li:hover ul {
display: inline-block;
}
.fix-selected {
background: none !important;
}
JavaScript
$( document ).ready(function() {
$("#main-nav div>ul>li").not('.selected').hover(function() {
$('#main-nav div>ul>li.selected').toggleClass('fix-selected');
})
});
$( document ).ready(function() {
$("#main-nav .selected>ul>li").not('.selected').hover(function() {
$('#main-nav div>ul>li.selected, #main-nav li>ul>li.selected').toggleClass('fix-selected');
})
});