html+css實現二級導航欄效果，簡單易看懂噢！

-Advertisement-

這應該是這幾天以來看到的最簡單易懂的有二級菜單欄的導航欄效果實現了使用html+css實現，看了好幾天導航欄的實現方式，要麼是太複雜的需要JS或者框架的，要麼是太簡單僅僅使用div和超鏈接的，再要麼就是只有簡單的一級導航，沒有二級菜單欄的，心情複雜就想找一個有二級菜單欄，使用html+css實 ...

這應該是這幾天以來看到的最簡單易懂的有二級菜單欄的導航欄效果實現了

使用html+css實現，看了好幾天導航欄的實現方式，要麼是太複雜的需要JS或者框架的，要麼是太簡單僅僅使用div和超鏈接的，

再要麼就是只有簡單的一級導航，沒有二級菜單欄的，心情複雜

就想找一個有二級菜單欄，使用html+css實現，使用無序列表ul+浮動實現的，今天總算是找到了，趕緊拿來練練手

代碼是很簡單，感覺可以當做模版來做，之後記錄一下樣式的設置，稍加修改就好了

話不多說，直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .nav{
            width: 600px;
            height: 40px;
            background-color: black;
            margin: 40px auto 0;
        }
        .nav li{
            float: left;
            margin-right: 10px;
            margin-left: 10px;
            position: relative;
        }
        .nav li a{
            display: block;
            height: 40px;
            width: 100px;
            text-align: center;
            background-color: #c1727f;
            line-height: 40px;
            color: #fff;
        }
        .nav li .nav2{
            display: none;
            left: -10px;
        }
        .nav li .nav2 li a{
            background-color: orange;
        }
        .nav li .nav2 li a:hover{
            background-color: #c1727f;
        }
        .nav li a:hover{
            background-color: lightcoral;
        }
        .nav li:hover .nav2{
            display: block;
            position: absolute;
        }
        .banner{
            width: 800px;
            height: 350px;
            margin: 0 auto;
            background: yellow;
            line-height: 350px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">產品中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品2</a></li>
                <li><a href="#">產品3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">游戲中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">電影中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">娛樂中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">教育中心</a>
            <ul class="nav2">
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
                <li><a href="#">產品1</a></li>
            </ul>
        </li>
    </ul>
    <div class="banner">
        輪播圖
    </div>
</body>
</html>

稍加解釋：無序列表嵌套實現二級菜單，樣式設置定位，把握好寬高及邊距即可

效果圖如下：

完畢。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

快速上手kettle(二)小試牛刀

[TOC](快速上手kettle二小試牛刀) ### 一、前言上一期中大概介紹了下kettle，並已經把kettle下載安裝完了。這一期我們就來簡單體驗下kettle怎麼進行數據轉換的。 ### 二、兩個小目標我們這裡呢就以兩個小案例來體驗下kettle - 將csv文件通過kettle ...
近2萬初中作文範例大全ACCESS\EXCEL資料庫

這是從互聯網上搜集的各種初中語文作文20000篇，經過完美的格式內容整理，包含大量《中考滿分作文》及《中考作文指導》資料，資料庫按年級和分類可以快速的為初中作文提供最齊全的參考。年級包含：初中二年級(2377)、初中三年級(1988)、初中一年級(15465)。分類包含：讀後感(778)、話題(1 ...
Flutter調優--深入探究MediaQuery引起界面Rebuild的原因及解決辦法

app界面逐漸複雜時，我們不得不考慮去優化界面性能。本文中介紹的例子在開發中是很常見的，如果不瞭解MediaQuery.of的機制，可能會引起大量使用此方法的界面發生重繪操作，造成頁面卡頓、幀率下降。我們詳細分析了背後的源碼邏輯，介紹瞭解決辦法，希望能給大家的調優工作提供些許幫助。 ...
了不起的互聯網老男孩，在創業路上不掉隊

“青春如同奔流的江河，一去不回來不及道別”，老男孩這首歌戳中了太多職場中年男人的心酸苦楚，面對經濟下行壓力、互聯網行業變革以及中年職場危機，互聯網人應該如何應對？如何建立和現實叫板的能力？有2位在互聯網創業多年的開發者，經歷了從PC互聯網到移動互聯網的發展變遷，踩過不少坑，一路磕磕碰碰走到現在，放 ...
1萬8千條英文笑話內容ACCESS\EXCEL資料庫

中文版的笑話似乎日益更新，從來不缺少，但是英文版的似乎因為在中國的受眾少從而缺少這方面的展示，而今天獲得的就是近2萬的英文笑話內容，將將之存放到由Microsoft Office Access 2003 創建的資料庫中。截圖下方有顯示“共有記錄數”，截圖包含了表的所有欄位列。該數據提供ACCESS數 ...
hybrid探索與實現

hybrid混合開發是一種離線移動應用開發方式，它結合了Web技術和原生技術，以網頁的形式嵌入到一個原生容器中。 ...
【一步步開發AI運動小程式】九、姿態輔助調試桌面工具折使用

> 隨著人工智慧技術的不斷發展，阿裡體育等IT大廠，推出的“樂動力”、“天天跳繩”AI運動APP，讓**雲上運動會、線上運動會、健身打卡、AI體育指導**等概念空前火熱。那麼，能否將這些在APP成功應用的場景搬上小程式，分享這些概念的紅利呢？本系列文章就帶您一步一步從零開始開發一個AI運動小程式，本 ...
JavaScript全解析——Express框架介紹與入門

本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力於教會每一個人學會JS！文末有本文重點總結，可以收藏慢慢看\~ 更多技術類內容，主頁關註一波！ ...