带有垂直导航的水平子标题

Question

我正在寻求一些导航方面的帮助。 我想要一个水平导航，当悬停在一个链接上时，一个子导航会下拉不同的部分（例如左右），2个标题将是水平的，在标题下会有垂直的子导航。 这对我来说有点难以解释，所以我将附上我创建的图片以尝试更好地解释它。

http://i.imgur.com/VYfp14e.png （不幸的是，我没有足够的声誉将图像直接发布到堆栈溢出。

所以悬停在标题 1 上会下拉 2 个水平标题（子标题 1 和 2）

在 subhead1 和 2 下将是垂直的可点击链接，可将用户导航到不同的页面。

（忘记了小提琴的链接）。 http://jsfiddle.net/8La4k57q/

 <nav id="nav" role="navigation">
<ul>
    <li>
        <a href="#" aria-haspopup="true">Heading 1</a>
        <ul>
        <a href="#" aria-haspopup="true">subHeading 1</a>
            <li><a href="#">Nav1</a></li>
            <li><a href="#">Nav2</a></li>
            <li><a href="#">Nav3</a></li>
            <li><a href="#">Nav4</a></li>

        <a href="#" aria-haspopup="true">subHeading 2</a>
            <li><a href="#">Nav5</a></li>
            <li><a href="#">Nav6</a></li>
            <li><a href="#">Nav7</a></li>
        </ul>
    </li>
</ul>

#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
}



#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }



#nav li ul
{
    display: none;
    position: absolute;
    top: 100%;
}
    #nav li:hover ul
    {
        display: block;
    }

谢谢

Answer 1

嗯..我们以标题1为例，这里id标题1将用于带有标题的div，id内容将用于带有内容的div。

$(document).ready(function(){
$("#heading1").mouseover(function(){
$("#content1").stop().slideDown();
});
$("#heading1").mouseout(function(){
$("#content1").slideUp();
});
});

我所指的内容是您的副标题和包含在名为 content1 的 div 中的链接。 如果您发布您的 html 代码，我可以更好地解释。