html - 二级导航/菜单栏，在主导航按钮悬停时向下推送网页内容

Question

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

主菜单中将有 6 个按钮，跨度为 960 像素的包含 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 easing to bounce out a div with css display: hidden;因此，当单击链接时，隐藏的 div 将缓和，然后在其他任何地方设置单击以恢复隐藏