Question

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

主菜单中将有6个按钮，横跨包含div的宽度为960px。然后，当您仅悬停在“产品”上时，每个其他主要按钮都将转到新页面，这应该打开一个跨越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来跳出div：hidden;因此，当单击链接时，隐藏的div将缓和，然后在其他任何位置设置单击以恢复为隐藏

辅助导航/菜单栏，在主导航按钮悬停时按下Web内容

1 个答案: