Could this menu layout be improved?
<div class="navigation">
<ul id="nav-menu">
<li class="active">
<div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span><br />HOME</a></div>
<div class="blue-line"></div>
</li>
<li>
<div class="sifr-r"><a href="#" title="property management" class="top-link"><span class="blue-small">02.</span><br />PROPERTY<br />MANAGEMENT</a></div>
<div class="blue-line"></div>
<ul>
<li><a href="#" title="Rental returns">Rental returns</a></li>
<li class="last"><a href="#" title="Resources">Resources</a></li>
</ul>
</li>
</ul>
and what about sIFR?
sIFR.replace(conduititc_light, {
selector: '.sifr-r',
css: [
'a {color: #3c4a4b; text-decoration: none; margin-left: 4}',
'a .blue-small {color: #00bbd6; font-size: 8}',
'a:hover {color: #ffffff}',
'a:hover .blue-small {color: #00bbd6}',
'a.hover {color: #ffffff}'
],
wmode: 'transparent'
});
How can we retain the hover effect with sIFR when the mouse points on a li element? While without sIFR it was achieved with JavaScript (mootools):
var nav = $('nav-menu');
nav.getElements('.sifr-r').each(function(item) {
item.getParent().addEvents({
'mouseover': function() {
if (!item.getParent().hasClass('hover')) {
item.getParent().addClass('hover');
}
},
'mouseout': function() {
if (item.getParent().hasClass('hover')) {
item.removeClass('hover');
}
}
});
});
And how do we handle this in CSS?
.navigation ul li.hover a.top-link {color: white}