HTML5和CSS在網站開發中起著非常重要的作用。其中二級菜單被廣泛應用于網站導航欄的設計中。在這里，我們將介紹一種使用HTML5和CSS實現的簡單二級菜單代碼。
首先，在HTML文件的body部分添加一個無序列表（ul）和多個列表項（li），其中每個列表項表示一個菜單項，如下所示：
<ul> <li>主頁</li> <li>文章 <ul> <li>國際新聞</li> <li>國內新聞</li> <li>科技新聞</li> </ul> </li> <li>關于我們</li> </ul>在這個示例中，我們為“文章”這個菜單項添加了一個二級菜單，通過在“文章”這個列表項下添加一個新的無序列表。 接下來，我們需要使用CSS代碼來創建菜單的樣式。以下是一些基本的CSS樣式，你可以根據自己的需要進行修改：
ul {
list-style: none;
background-color: #f2f2f2;
padding: 0;
}
li {
display: block;
position: relative;
float: left;
background-color: #f2f2f2;
padding: 10px 20px;
}
li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
z-index: 1;
}
li:hover ul {
display:inherit;
}
li ul li {
clear: both;
width: 100%;
padding: 10px 20px;
}
li ul li:hover {
background-color: #f2f2f2;
}在這個示例中，我們使用“display:none”樣式來隱藏二級菜單，使用“position:absolute”將其置于菜單項下方，使用“z-index”將其置于菜單項上方。使用“:hover”樣式當鼠標懸停在菜單項時顯示二級菜單，使用“clear:both”樣式將列表項換行并占滿整個容器。
最后，將上述CSS樣式在HTML文件的head部分中添加樣式表鏈接：<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>這樣，一個簡單的HTML5和CSS實現的二級菜單就完成了。它可以幫助你優雅地展示網站的導航界面，并為用戶提供更好的用戶體驗。