欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS+CSS 制作的超級簡單的下拉菜單附圖

 更新時間：2013年11月22日 17:04:52   作者：  
下拉菜單想必大家都有見到過吧，在本文將為大家介紹個不錯的示例，超簡單的，大家可以參考下哦
先看效果：
 
代碼：
復制代碼 代碼如下:

<html>
<head>
<title>Good Test</title>
<script>
function showSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "inline";
}
function HideSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "none";
}
</script>
<style>
.menu{
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
.submenu {
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td style="vertical-align:top;">
<span class="menu" id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span>
<br />
<div id="SubMenu1" style="display:none" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')">
<span class="submenu">SubMenu1</span><br />
<span class="submenu">SubMenu2</span><br />
<span class="submenu">SubMenu3</span><br />
<span class="submenu">SubMenu4</span>
</div>
</td>
<td style="vertical-align:top;">
<span class="menu" id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span>
<br />
<div id="SubMenu2" style="display:none" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">
<span class="submenu">SubMenu1</span><br />
<span class="submenu">SubMenu2</span><br />
<span class="submenu">SubMenu3</span><br />
<span class="submenu">SubMenu4</span>
</div>
</td>
<td style="vertical-align:top;">
<span class="menu" id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span>
<br />
<div id="SubMenu3" style="display:none" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">
<span class="submenu">SubMenu1</span><br />
<span class="submenu">SubMenu2</span><br />
<span class="submenu">SubMenu3</span><br />
<span class="submenu">SubMenu4</span>
</div>
</td>
<td style="vertical-align:top;">
<span class="menu" id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span>
<br />
<div id="SubMenu4" style="display:none" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">
<span class="submenu">SubMenu1</span><br />
<span class="submenu">SubMenu2</span><br />
<span class="submenu">SubMenu3</span><br />
<span class="submenu">SubMenu4</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

相關文章

  • 小程序實現選擇題選擇效果

    小程序實現選擇題選擇效果

    這篇文章主要為大家詳細介紹了小程序實現選擇題選擇效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • 在實例中重學JavaScript事件循環(huán)

    在實例中重學JavaScript事件循環(huán)

    這篇文章主要介紹了在實例中重學JavaScript事件循環(huán)，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
    2020-12-12
  • 原生js獲取瀏覽器窗口及元素寬高常用方法集合

    原生js獲取瀏覽器窗口及元素寬高常用方法集合

    本文主要介紹了原生js獲取瀏覽器窗口及元素寬高常用方法。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript實現網絡測速的方法詳解

    JavaScript實現網絡測速的方法詳解

    在我們的日常生活中離不開網絡，而網絡的快慢直接決定了用戶的產品使用體驗。本文就來帶大家了解如何用JavaScript實現網絡測速，需要的可以參考一下
    2023-01-01
  • 基于JavaScript實現窗口拖動效果

    基于JavaScript實現窗口拖動效果

    這篇文章主要介紹了基于JavaScript實現窗口拖動效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • Javascript中正則表達式的應用詳解

    Javascript中正則表達式的應用詳解

    這篇文章主要為大家詳細介紹了Javascript中正則表達式的應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-02-02
  • 對table和ul實現js分頁示例分享

    對table和ul實現js分頁示例分享

    本文主要介紹了js對table和ul li實現前臺分頁,需要的朋友可以參考下
    2014-02-02
  • 文本框回車提交與禁止提交示例

    文本框回車提交與禁止提交示例

    文本框輸入數據后使用回車進行提交，想必大家都嘗試過吧，在本文有個不錯的示例，喜歡的朋友可以參下
    2013-09-09
  • javascript前端實現多視頻上傳

    javascript前端實現多視頻上傳

    這篇文章主要為大家詳細介紹了javascript前端實現多視頻上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • JS回調函數 callback的理解與使用案例分析

    JS回調函數 callback的理解與使用案例分析

    這篇文章主要介紹了JS回調函數 callback的理解與使用,結合具體案例形式分析了javascript回調函數的功能、原理、用法及相關操作注意事項,需要的朋友可以參考下
    2019-09-09

最新評論