创建菜单栏答案

【问题标题】：creating menu bar创建菜单栏
【发布时间】：2017-04-19 23:02:32
【问题描述】：

我想使用 jquery、css、html 创建一个带有鼠标悬停动作的下拉菜单栏。请对这些想法不熟悉，任何人都可以帮助我。

【问题讨论】：

总是先搜索再询问。 catb.org/~esr/faqs/smart-questions.html

标签： jquery html css

【解决方案1】：

我相信这会对您有很大帮助： http://css-tricks.com/simple-jquery-dropdowns/

【讨论】：

【解决方案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");
     });
});

【讨论】：

【解决方案3】：

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

【讨论】：