Html 辅助导航/菜单栏，将web内容向下推到主导航按钮的悬停位置

我试图创建一个简单的导航菜单，当你点击其中一个按钮时，下面会弹出一个二级菜单，但会通过滑动动作将下面的内容向下推

主菜单中将有6个按钮，跨越960px处包含div的宽度。然后，当您仅停留在“产品”上时，每隔一个主按钮将转到一个新页面，这将打开一个跨2行的辅助导航。每个按钮是159像素

这是我的密码：

HTML:

这是我的护照--请帮忙

非常感谢,

---

马特

我会研究jQuery，用css显示弹出一个div：隐藏；因此，当点击一个链接时，隐藏的div将被释放，然后在其他任何地方设置一个click以还原为隐藏的

你添加css的方式与添加HTML和JavaScriptJaques的方式相同。感谢Jaques，我错过了ctrl+k的功能！嗨，亚当，谢谢你的回复，但我不确定这个搜索词的正确性，我整个上午都在毫无乐趣地寻找。也许你可以帮我举一个代码的例子或者一个链接到一个可能有用的页面。谢谢你抽出时间。这有帮助吗？@Adam'Sacki'Sackfield-这不太正确，我想要的是悬停状态。因此，当您将鼠标悬停在“Products”（请参阅我的JSFIDLE）上时，辅助菜单将滑动并向下推送其下方的所有内容。您可以将jquery事件处理程序更改为悬停，而不是单击以执行所需的动画-我已将状态更改为悬停，但我需要“此处的某些文本”要隐藏的框和鼠标悬停在按钮上时显示的。

<div id="menu"> 
        <ul>
            <li><a href="index.html">About Us</a></li>
            <li id="products"><a href="#">Products</a></li>
            <li><a href="suppliers.html">Our Suppliers</a></li>
            <li><a href="findus.html">Find Us</a></li>
            <li><a href="deliveries.html">Deliveries</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>

     <div id="subMenu">
        <ul>
            <li><a href="winesandspirits.html">Wine &amp; Spirits</a></li>
            <li><a href="beersandciders.html">Beer &amp; Ciders</a></li>
            <li><a href="otherdrinks.html">Other Drinks</a></li>
            <li><a href="cheese.html">Cheese</a></li>
            <li><a href="meatsandpate.html">Meat &amp; Pate</a></li>
            <li><a href="vegetables.html">Vegetables</a></li>
            <li><a href="drystores.html">Dry Stores</a></li>
            <li><a href="honey.html">Honey &amp; Preserves</a></li>
            <li><a href="oliveoilandvinegar.html">Olive Oil &amp; Vinegar</a></li>
            <li><a href="sweetthings.html">Sweet Things</a></li>
            <li><a href="hampers.html">Hampers</a></li>
            <li><a href="accessories.html">Accessories</a></li>  
        </ul>
    </div>

     </div>

#menu a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    letter-spacing: 1px;
    color: #fff;
    font-size: 12.5px;
    text-decoration: none;
    padding:0;
    margin: 0
}
#menu a:hover {
    color: #cff;
}
#menu {
    background: #689169;
    height:35px;
    width: 960px;
    transition:height 0.2s;
    -webkit-transition:height 0.2s;
}
#menu:hover {
    height: 105px;
}
#menu ul {
    padding: 0;
    margin: 0;
    position: absolute;
    list-style:none;
}
#menu ul li {
    float: left;
}
#menu ul li a {
    width: 159px;
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding: 10px; padding-right: 30px; padding-left: 30px;*/
    margin: 0;
    background: #689169;
    text-align: center;
    border-right: 1px solid #666;
    display:block;
}
#subMenu {
    position: absolute;
    z-index: 1;
    margin-top: 34px;
    width: 700px;
    height: 600px;
}
#subMenu ul {
    position: relative;
    float: left;
}
#subMenu ul li {
    clear: both;
    border-right: 1px solid #666
}
#subMenu ul li a {
    background: none;
    border: none;
}
#subMenu ul li a:hover {
    color: #fff;
}
#outset {
    width: 700px; height: 300px;
    background: #900;    
}