- 主頁
- 產品介紹
- 功能特點
- 規格參數
- 聯系我們
- 商務合作
- 客戶服務
這是一段HTML代碼，用于制作導航酷炫的下拉菜單效果。代碼中使用了JavaScript和CSS樣式語言。運用JavaScript語言實現鼠標事件的響應，鼠標滑過某一菜單項時將其className屬性設置為"active"，鼠標離開時將其屬性設置為空。實現下拉菜單的效果則使用了CSS樣式語言，為ul和li標簽定義了特定的屬性，使其呈現出水平排列、黑底白字的效果，同時也實現了下拉菜單的效果。代碼中的ul ul選擇器是用于使下拉的子菜單擁有絕對定位位置，并且隱藏不可見。
<HTML>
<HEAD>
<TITLE>下拉式菜單</TITLE>
<SCRIPT language="javascript">
window.onload = function () {
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++) {
oLi[i].onmouseover = function () {
this.className = "active";
}
oLi[i].onmouseout = function () {
this.className = "";
}
}
}
</SCRIPT>
<STYLE>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #333333;
color: #FFFFFF;
font-size: 16px;
position: relative;
}
.active {
background-color: #FFFFFF;
color: #333333;
}
ul ul {
position: absolute;
top: 30px;
left: 0px;
width: 120px;
display: none;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<ul>
<li>主頁</li>
<li>產品介紹
<ul>
<li>功能特點</li>
<li>規格參數</li>
</ul>
</li>
<li>聯系我們
<ul>
<li>商務合作</li>
<li>客戶服務</li>
</ul>
</li>
</ul>
</DIV>
</BODY>
</HTML>下一篇html封面源代碼