Question

我想使用jquery，css，html创建一个带有鼠标悬停操作的下拉菜单栏。对于这些想法，我是新手，任何人都可以帮助我。

Answer 1

我相信这会帮助你减肥： http://css-tricks.com/simple-jquery-dropdowns/

Answer 2

如果您想从头开始开发它，那么您可以查看此demo，这将帮助您了解下拉菜单的工作原理。如果您不想重新发明轮子，那么您可以选择其他人提到的任何插件。

HTML

<ul id="menu">
    <li class="menuitem">
        <a href="#">Menu Item 1</a>
        <div class="submenu">
            <div>1</div>
             <div>2</div>
        </div>
    </li>
    <li class="menuitem">
        <a href="#">Menu Item 2</a>
        <div class="submenu">
            <div>3</div>
             <div>4</div>
        </div>
    </li>
    <li class="menuitem">
        <a href="#">Menu Item 3</a>
        <div class="submenu">
            <div>5</div>
             <div>6</div>
        </div>
    </li>
</ul>

CSS

#menu li.menuitem
{
    width: 100px;
    height: 30px;
    float: left;
    margin: 0 10px;
}
.submenu
{
    display: none;
    border-bottom: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        border-right: 1px solid #a9a9a9;
}
.submenuactive
{
    display: block;
        border-bottom: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        border-right: 1px solid #a9a9a9;
}

JQUERY

$(function(){
    $("#menu li.menuitem").hover(function(){
        $(this).find("div.submenu").removeClass("submenu").addClass("submenuactive");
    },
     function(){
         $(this).find("div.submenuactive").removeClass("submenuactive").addClass("submenu");
     });
});

Answer 3

在此处搜索插件 - http://plugins.jquery.com/

创建菜单栏

3 个答案: