I have been searching for a solution tailored to my specific needs, and I am encountering difficulties in getting a seemingly simple jQuery code to function as expected.
Here is the link to my basic fiddle: http://jsfiddle.net/LBHxc/ (I apologize for the image not loading from its external host.)
HTML Code...
<nav class="nav-buttons">
<ul>
<li class="nav-button"><a href="#">Services</a>
</li>
<li class="nav-button"><a href="#">Work</a>
</li>
<li class="nav-button top-menu"> <a href="#">Insight</a>
<ul class="sub-menu">
<li><a href="#"></a>
</li>
<li><a href="#"></a>
</li>
<li><a href="#"></a>
</li>
</ul>
</li>
<li class="nav-button"><a href="#">Contact</a>
</li>
</ul>
</nav>
CSS Code
.nav-buttons {
float:left;
margin-top: 10px;
width: 370px;
height: 20px;
}
.nav-buttons a {
padding:0 1px 20px 0;
display:block;
color: #e4e4e4;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: color .06s ease-in;
-moz-transition: color .06s ease-in;
-o-transition: color .06s ease-in;
transition: color .06s ease-in;
}
<nav class="nav-buttons">
<ul>
<li class="nav-button"><a href="#"></a>
</li>
</div>
</body>
</html>
.menu-drop-down {
background:url(www.anim-house.co.uk/images/drop-down-arrow.png) no-repeat;
background-position: 50% 26px;
}
JavaScript
$('.sub-menu').hover(
function () {
$('.top-menu a').addClass('menu-drop-down');
});
The behavior I aim to achieve is when hovering over "Insight," a dropdown box with three large buttons appears, along with a light blue arrow linking these boxes to Insight: <-- that When hovering on a sub-menu, I want the arrow to remain positioned below Insight. I have researched the limitations of child elements affecting their parents without JavaScript, but I am struggling to implement this. Any assistance would be greatly appreciated! (And please point out where I might have misstepped—after all, learning is my mission).