Is there a way to achieve this using only CSS without any JavaScript?
For reference, here's the fiddle: http://jsfiddle.net/q646Ljg6/4/
This is the HTML:
<div id="navigation" class="navigation">
<div id="dropmenu" class="dropmenu">
<login>
<ul>
<li> <a href="#" ><span id="cart-button" class="flaticon flaticon-cart" aria-hidden="true"></span></a>
</li>
<li> <a href="javascript:void(0);">Dropdown C</a>
<ul>
<li><a href="#" >Option 1</a>
</li>
<li><a href="#" >Option 2</a>
</li>
<li><a href="#" >Option 3</a>
</li>
</ul>
</li>
</ul>
</login>
<ul>
<li> <a href="/">Home</a>
</li>
<li> <a href="javascript:void(0);" >Dropdown A</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li><a href="#" >Dropdown A - 1</a>
</li>
<li><a href="#" >Dropdown A - 2</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li> <a href="javascript:void(0);" >Dropdown B</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li> <a href="#" >Dropdown B - 1</a>
<ul>
<li><a href="#" >Dropdown B - 1 - 1</a>
</li>
</ul>
</li>
<li><a href="#" >Dropdown B - 2</a>
<ul>
<li><a href="#" >Dropdown B - 2 - 1</a>
</li>
<li><a href="#" >Dropdown B - 2 - 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>>
</li>
<li style="float:none;overflow:hidden;">
<div class="dark width-max"> <span>
<input id="quick-search" data-load="content" data-url="/quicksearch" class="search" type="text" placeholder="Quick Search" maxlength="50" autocomplete="off">
<div id="search-results" class="search-results"></div>
</span>
</div>
</li>
</ul>
</div>
</div>
<div>
content content content content content content content content content content content content content content content content content content content content content content content content </div>
Javascript:
var currentTop = -1;
var currentSub = -1;
var currentProfile = -1;
//var topMenu = '';
//var subMenu = '';
var lastToggled = '';
function InitNav() {
$('#dropmenu > ul > li > a', 'body').mouseenter(ToggleTop);
$('#dropmenu', 'body').mouseleave(ToggleTop);
$body.on('click', '#dropmenu > ul > li ul > li > a', ToggleSub);
$('#dropmenu login a', 'body').mouseenter(ToggleProfileIn)....
function ToggleTop(e) {
... (CSS styles omitted)
}
InitNav();
CSS:
.navigation {
/* CSS styles */
}
.dropmenu {
/* CSS styles */
}
/* Other CSS rules */
...
... (Additional CSS styles omitted)
...