CSS6是一種全新的樣式表語言,它提供了更多的樣式選項,其中二級導航是非常實用的一種功能。下面是一個二級導航的CSS6模板:
/* 一級導航樣式 */ nav{ background-color: #333; height: 50px; position: relative; } nav ul{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } nav ul li{ position: relative; margin: 0 10px; } nav ul li a{ display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 50px; font-size: 16px; font-weight: bold; } /* 二級導航樣式 */ nav ul li ul{ position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 5px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); display: none; } nav ul li:hover ul{ display: block; } nav ul li ul li{ margin: 0; } nav ul li ul li a{ display: block; color: #333; text-decoration: none; padding: 10px; font-size: 14px; } nav ul li ul li:hover{ background-color: #f9f9f9; }
通過這個模板,我們可以輕松地實現一個帶有二級導航的頁面,滿足不同用戶的需求。CSS6的功能強大,使用靈活,相信未來會有更多的人使用它來構建網站。