I am trying to create a CSS/Jquery horizontal menu. All of the list items

Question

0

Asked: June 7, 20262026-06-07T14:18:33+00:00 2026-06-07T14:18:33+00:00

I am trying to create a CSS/Jquery horizontal menu. All of the list items

0

I am trying to create a CSS/Jquery horizontal menu. All of the list items include a link and one will include a hidden div which should be displayed when the corresponding link is hovered over.

The problem I am having is when the link is hovered over the hidden div is in the container div of the menu, meaning the background of the now displayed div is the same as the menu, and other styles.

What I would like is for the div which is to be displayed, is not part of the same div as the menu but which appears beneath the corresponding link.

An example I found is http://www.inprocorp.com/default.aspx if you hover over any of the header links.

The content in the hidden div could contain images, HTML lists, paragraphs…

I tried to use jsfiddler but it is down at the moment.

Code:

HTML

<div id="centeredmenu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li class="subMenu"><a href="#" id="prod">products</a>
<div class="hiddencontent">hidden content</li>
<li><a href="#">contact</a></li> 
<li><a href="#">about</a></li>
</ul>
</div>

JS

$('li.subMenu a').hover(function(evt)
{       
var link = $(this);
var dialog = link.next('div');
dialog.css("top", link.position().top);
dialog.css("left", link.position().left);
dialog.css("position", "relative"); 
dialog.show();
},

function() { 
$(this).next('div').hide();
})

Thanks,
Andrew