jquery實現最簡單的下拉菜單

本文轉載自查看原文 2017-12-02 19:17 8309 jquery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
}
.menu {
    width: 120px;
    background-color: #CCC;
    position: relative;
    height: 26px;
}
.menu .sub {
    position: absolute;
    display:none;
    left: 0px;
    top: 26px;
    background-color: #9CF;
    width: 100%;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
    $('.menu').mouseover(function(e){
      $(this).find('.sub').toggle();
    });
    $('.menu').mouseout(function(e){
      $(this).find('.sub').toggle();
    });
});
</script>
</head>

<body>
<div class="menu">
<span>按鈕</span>
<dl class="sub">
<dd><a href="">選項1</a></dd>
<dd><a href="">選項2</a></dd>
<dd><a href="">選項3</a></dd>
</dl>
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery實現下拉菜單 jquery實現多級下拉菜單 jquery下拉菜單的實現心得 html簡單實現下拉菜單基於jQuery的下拉菜單菜單【02】，諸位上眼！！！ ABAP分享四選擇屏幕下拉菜單簡單實現示例簡單叨叨bootstrap按鈕無限層級下拉菜單的實現 jq+css+html簡單實現導航下拉菜單純CSS實現的下拉菜單基於jQuery的下拉菜單插件，諸位上眼！！！