二級導航在網站中經常出現，是一種方便用戶快速導航瀏覽網站的方式。HTML5提供了一些新的特性來實現二級導航，這篇文章將介紹如何使用HTML5創建一個簡單的二級導航。
首先，我們需要使用HTML5的新語義標簽來創建導航菜單。在頁面的頂部添加一個
<nav> <ul> <li><a href="#">主頁</a></li> <li><a href="#">產品</a> <ul> <li><a href="#">產品1</a></li> <li><a href="#">產品2</a></li> <li><a href="#">產品3</a></li> </ul> </li> <li><a href="#">關于</a></li> </ul> </nav>
在我們的導航菜單中，我們使用了<ul>和<li>標簽來創建列表。其中，二級導航使用了<ul>和<li>標簽嵌套，用來創建一個下拉菜單。在這個例子中，我們創建了一個包含三個主菜單項和一個包含三個子菜單項的下拉菜單。
接下來，我們需要一些CSS樣式來美化我們的導航菜單。以下是一個簡單的CSS樣式示例：
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
position: relative;
padding: 12px 8px;
}
nav ul li:hover {
background-color: #eee;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul li a {
display: block;
padding: 12px 8px;
color: #333;
}
nav ul ul li a:hover {
background-color: #f9f9f9;
}這個CSS樣式添加了一些默認的樣式，用來使導航菜單看起來更美觀。在這個樣式中，我們定義了主菜單項和子菜單項的默認樣式，定義了鼠標懸停樣式和下拉子菜單的樣式。當鼠標懸停在主菜單項上時，會展示出子菜單項。
HTML5提供了很多新的特性來創建二級導航。使用<nav></nav>標簽和<ul></ul>及<li></li>標簽來創建清晰、具有可讀性以及結構化的導航菜單，并通過CSS來美化導航菜單，使其更具有交互性。
上一篇html5二級導航欄代碼
下一篇jsp如何引入css樣式