元素用于表示鏈接。
為了實現HTML5響應式導航，我們需要使用CSS media queries。以下是一個示例：/* CSS樣式表 */
@media (max-width: 767px) {
/* 移動設備橫屏和豎屏都適用的樣式 */
#mainNav {
height: auto;
}
#mainNav .navContainer {
width: 100%;
margin: 0;
}
#mainNav .navToggle {
display: block;
text-align: right;
}
#mainNav .main-menu {
display: none;
clear: both;
width: 100%;
}
#mainNav .main-menu li {
display: block;
width: 100%;
margin: 0;
}
#mainNav .main-menu a {
display: block;
padding: 10px;
background: #333;
color: #fff;
border-bottom: 1px solid #222;
}
/* 顯示導航菜單 */
#mainNav .active {
display: block;
}
}
@media (min-width: 768px) {
/* 臺式機的樣式 */
#mainNav {
height: 70px;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
background: #fff;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
white-space: nowrap;
}
#mainNav .navContainer {
width: 80%;
height: 70px;
margin: 0 auto;
}
#mainNav .navToggle {
display: none;
}
#mainNav .main-menu {
float: right;
display: block !important;
height: 70px;
}
#mainNav .main-menu li {
float: left;
display: block;
margin-left: 20px;
margin-top: 10px;
position: relative;
}
#mainNav .main-menu a {
display: block;
padding: 20px 10px;
color: #222;
text-decoration: none;
}
#mainNav .main-menu a:hover {
color: #f00;
background: none;
}
}以上CSS代碼使用@media查詢來設置不同設備寬度下的導航菜單樣式。在移動設備上，導航菜單是可折疊的，只有當用戶點擊菜單按鈕時才會顯示出來。在臺式機上，導航菜單是水平顯示的。
HTML5響應式導航的實現可以大大提高網站的用戶體驗。它能使用戶很方便地找到他們需要的信息，而不會受到設備寬度的限制。