使用CSS和HTML创建下拉菜单

Question

我正在尝试用四列子菜单制作一个导航栏。我编码了大部分东西，但是当我创建子菜单时，我发现了问题。

这是我的HTML：

<div id="navigation">
    <ul>
        <li class="current">
            <a href="" class="">Home</a>
        </li>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul>
                            <li class="two">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="three">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="four">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="five">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="">
            <a href="">Service Maintenance</a>
        </li>
        <li class="sub-menu">
            <a href="">Frequently Ask Questions</a>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>               
</div>

希望有人能帮我。谢谢。

Answer 1

看看这个http://jsfiddle.net/qtvVK/11/embedded/result/。

我对您的标记做了一些更改，使用了display:inline-block;而不是浮动元素。

相关CSS系统

/* Dropdown styles */
 #navigation ul > li > ul.sub-menu {
    display: none;
    position:absolute;
    padding:10px 0;
    background:#fff;
    border: 1px solid #DDDCDC;
    top: 24px;
    z-index: 1;
}
/* Show dropdown when hover */
 #navigation ul > li:hover > ul.sub-menu {
    display:block;
}
.row {
    width:auto;
    white-space: nowrap;
}
.col {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}

Answer 2

问题是容器宽度定义为300 at。

#navigation ul li > div.product {
    width: 300px;
}

它的子元素占据了100%的空间。所以你需要确保他们有漂浮的空间。

#navigation div.col {
float: left;
    height:200px;
    width: 25%;
}

希望这对你的问题有帮助。

小提琴

Answer 3

我建议使用jQuery。它有一个名为slideDown()的简单函数。这里是一个很好的教程的链接。

您应该这样做:首先，在脚本启动时隐藏菜单：

$("#idOfDropDownMenu").hide();

并命令在鼠标进入按钮时下拉菜单，并在鼠标离开时滑动：

$("#idOfButton").hover(function(){      //function that fires when mouse enters
    $("#idOfDropDownMenu").slideDown();
}, function() {                         //function that fires when mouse leaves
    $("#idOfDropDownMenu").slideUp();
}

您可以使用任何CSS选择器，而不是使用ID。

我希望这对你的问题有帮助。