不依赖任何框架的下拉菜单

Html

Css

Js

dropdown



link1


link2


link3

.dropbtn { display:inline-block; background-color:green; color:#c6e2ff; text-align:center; padding:14px 16px; text-decoration:none; } a:hover,.dropdown:hover .dropbtn { background-color:#104e8b; } .dropdown { display:inline-block; } .dropdown-content { display:none; position:absolute; background-color:white; min-width:160px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color:#36648b; padding:12px 16px; text-decoration:none; display:block; } .dropdown-content a:hover { background-color:#36648b; color:#f4a873; } .dropdown:hover .dropdown-content { display:block; }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

dropbtn中定义显示下拉菜单按钮

<a href="#" class="dropbtn">
      dropdown
</a>

dropdown-content中定义隐藏的菜单内容

<div class="dropdown-content">
    <a href="#">
         link1
    </a>
    <a href="#">
         link2
    </a>
    <a href="#">
         link3
    </a>
</div>

在css文件中设置样式

.dropbtn {
    display:inline-block;
        background-color:green;
    color:#c6e2ff;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}

/*鼠标悬浮在菜单上时，改变显示按钮的颜色*/
a:hover,.dropdown:hover .dropbtn {
    background-color:#104e8b;
}

/*隐藏菜单列表的初始样式*/
.dropdown-content {
    display:none;
    position:absolute;
    background-color:white;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}

/*隐藏菜单列表中链接（文字）的样式*/
.dropdown-content a {
    color:#36648b;
    padding:12px 16px;
    text-decoration:none;
    display:block;
}

/*鼠标悬浮在隐藏菜单列表的链接时，改变链接的样式*/
.dropdown-content a:hover {
    background-color:#36648b;
    color:#f4a873;
}