辅助导航/菜单栏，用于在悬停主导航按钮时向下推送web内容

Question

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

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

下面是我的代码：

HTML：

<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>

和我的CSS：

#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;    
}

这是我的JSFiddle - http://jsfiddle.net/Jfdvr/1/ -请帮帮我！

非常感谢，

哑光

Answer 1

我会研究jQuery的缓动，弹出一个带有css display: hidden的div；所以当点击一个链接时，隐藏的div会缓缓出来，然后在其他任何地方点击都会恢复为隐藏。