如何利用HTML做出滑鼠劃過的二級選單列(實例原始碼)
Oct 09, 2018 pm 03:47 PM本篇文章主要介紹如何利用HTML做出滑鼠劃過的二級選單列(實例原始碼),對做網站很有幫助,需要的朋友可以參考下,並且把實例原始碼分享給大家,具體如下:
先上效果圖:
1、滑鼠沒在上面
2、滑鼠放在一級選單上,展開二級選單
3、滑鼠放在二級選單上
#實例原始碼如下:
<html> <head> <title>二级菜单测试</title> <meta charset="utf-8"> <style type="text/css"> /*为了使菜单居中*/ body { padding-top:100px; text-align:center; } /* -------------菜单css代码----------begin---------- */ .menup { border: 2px solid #aac; overflow: hidden; display:inline-block; } /* 去掉a标签的下划线 */ .menup a { text-decoration: none; } /* 设置ul和li的样式 */ .menup ul , .menup li { list-style: none; margin: 0; padding: 0; float: left; } /* 设置二级菜单绝对定位,并隐藏 */ .menup > ul > li > ul { position: absolute; display: none; } /* 设置二级菜单的li的样式 */ .menup > ul > li > ul > li { float: none; } /* 鼠标放在一级菜单上,显示二级菜单 */ .menup > ul > li:hover ul { display: block; } /* 一级菜单 */ .menup > ul > li > a { width: 120px; line-height: 40px; color: black; background-color: #cfe; text-align: center; border-left: 1px solid #bbf; display: block; } /* 在一级菜单中,第一个不设置左边框 */ .menup > ul > li:first-child > a { border-left: none; } /* 在一级菜单中,鼠标放上去的样式 */ .menup > ul > li > a:hover { color: #f0f; background-color: #bcf; } /* 二级菜单 */ .menup > ul > li > ul > li > a { width: 120px; line-height: 36px; color: #456; background-color: #eff; text-align: center; border: 1px solid #ccc; border-top: none; display: block; } /* 在二级菜单中,第一个设置顶边框 */ .menup > ul > li > ul > li:first-child > a { border-top: 1px solid #ccc; } /* 在二级菜单中,鼠标放上去的样式 */ .menup > ul > li > ul > li > a:hover { color: #a4f; background-color: #cdf; } /* -------------菜单css代码----------end---------- */ </style> </head> <body> <!-- -------菜单html代码---------begin------- --> <p class="menup"> <ul> <li> <a href="#">菜单一</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a href="#">菜单二</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a href="#">菜单三</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a href="#">菜单四</a> </li> <li> <a href="#">菜单五</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </p> <!-- -------菜单html代码---------end------- --> </body> </html>
登入後複製
以上就是如何利用HTML做出滑鼠劃過的二級選單列(實例原始碼)的全部介紹,如果你想了解更多有關html教程,請關注php中文網。
以上是如何利用HTML做出滑鼠劃過的二級選單列(實例原始碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?
