如何用html寫三級菜單

原創 皖月擎空 2018-08-22 12:24 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav3.css">
</head>
<body>
    <div class="box">
        <div class="tit1">一級菜單</div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="tit1">一級菜單</div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="tit1">一級菜單</div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="tit1">一級菜單</div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="tit1">一級菜單</div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
        <div class="tit2">
            <p>二級菜單</p>
            <div class="tit3">
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
                <a href="">三級菜單</a>
            </div>
        </div>
    </div>
</body>
</html>

css裏面的內容
html,body{
    height:100%;
}
*{
    padding:0;
    margin:0;
}
a{
    text-decoration:none;
}
.box{
    width:100px;
    /*加上這是橫着排的導航*/
    float:left;
    margin-left:1px;
}
.tit1,.tit2,a{
    height:40px;
    width:100px;    
    color:white;
    line-height:40px;
    text-align:center;
}
.tit1{
    background:black;
    font-size:18px;
}
.tit1:hover{
    background:orange;
    color:black;
    font-size:18px;
}
.box:hover .tit2{
    display:block;
}
.tit2{
    background:blue;
    display:none;
    position:relative;
}
.tit2:hover{
    background:cyan;
    color:black;
    font-size:18px;
}
.tit2:hover a{
    display:block;
}
.tit3{
    position:absolute;
    left:100px;
    top:0;
}
a{
    background:green;
    display:none;
    font-size:16px; 
}
a:hover{
    background:purple;
    color:white;
    font-size:18px;
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

children和childNodes的區別

children 獲取當前元素的子節點元素（不包含文本元素） childNodes 獲取當前元素的子節點元素（包含文本元素） 有的時候不一定有children屬性 爲了兼容可以把childNodes中的元素過濾出來 functio

ynd_sg 2020-07-08 09:20:23

base64圖片上傳，並顯示圖片，

<a href="javascript:;" class="file">選擇文件 <input type="hidden" id="files-button" /> <input type="file" name="fil

qq_28761593 2020-07-08 02:31:49

HTML+CSS相對寬度和絕對寬度衝突時的div解決方法

相對寬度和絕對寬度衝突時的div解決方法 摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎麼辦呢？ 我們通過一道例題來講解今天的內容： 1.完成圖片上的題目要求 2.嘗試提

Super_Tiger_Lee 2020-07-07 17:52:15

移動web開發學習整理

移動web flex彈性 案例 彈性攜程首頁 效果： .base.css body, div, span, p, ul, li, a, img, input, h1, h2, h3, h4, i { margin: 0;

Silent Land 2020-07-06 20:14:43

【CSS】CSS之層疊性，繼承性，優先級

層疊性 樣式發生衝突的時候，總是執行後邊的樣式，和調用順序無關。 繼承性 文字的所有屬性都可以被繼承 -特殊：h1-h6 文字大小不能被繼承 a標籤文字顏色不能被繼承 優先級 默認樣式<標籤選擇器<類選擇器<id選擇器<行內樣式

乌鲁托拉曼 2020-07-06 18:44:51

發送http請求過程所經歷的階段

先上一張圖給大家看看 http請求流程圖 相信看完這張圖後大家對一次請求也有了大致的瞭解了，當前其中還有很多細節小編沒有畫出來，然後我們來看看部分過程的細節 所以其流程大致如下： 1：DNS解析域名得到IP地址 2：客戶端

沐春风这个名 2020-07-06 05:01:24

SVG基本使用（一、基本概念、使用方法、繪製矩形/圓/橢圓/直線/折現/多邊形/）

一、SVG概念 1.什麼是SVG? SVG英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖 2.位圖和矢量圖 在計算機中有兩種圖形, 一種是位圖, 一種是矢量圖 2.1 位圖: 傳統的 j

Cao_Mary 2020-07-05 23:02:37

SVG基本使用（四、動畫、動畫常用屬性、複合動畫/往返動畫/形變動畫/路徑動畫、腳本編程

一、動畫 1.SVG動畫 在SVG中提供了三種常用動畫標記 animate：基礎動畫 animateTransform：形變動畫 animateMotion：路徑動畫 2.SVG動畫屬性 attributeType: CS

Cao_Mary 2020-07-05 23:02:37

詳細瞭解flex佈局的相關屬性

flex佈局相信大家已經不陌生了，越來越多的人在開發中使用flex進行自適應的佈局。但是呢，有些flex的屬性代表什麼意思你真的瞭解嗎？下面我就着重說一說不常用的flex屬性吧（可能只是我個人不常用  (⊙﹏⊙)） 包含元素設置displ

百岁如流富贵冷灰 2020-07-05 17:35:36

怎麼對阿里iconfont兩個項目中的字體圖標合併

1.把下載下來的2個文件夾都放入項目中 2.如要把iconfont2文件夾中的字體圖標合併到iconfont文件夾中,則如下圖，修改iconfon2文件夾下左側該圖標的五個文件名，同時修改這個文件夾中iconfont.css中@fon

weixin_38203203 2020-07-05 12:49:29

多行文本文本輸入框 textarea 可點擊任意地方輸入文字而不是隻能在開頭輸入的問題

   問題如圖:textarea可以點擊任意地方編輯 原因:textarea標籤之前有空隙 改成下圖這樣就可以了:

weixin_38203203 2020-07-05 12:49:19

flex佈局(彈性佈局、伸縮佈局)

flex是CSS3中的一種佈局方式 主要介紹下彈性佈局的常用的一些屬性 當一個盒子設置爲display:flex的時候,盒子會變爲一個彈性盒子,盒子內部的子元素會默認沿着主軸方向排布,此時會引出主軸和側軸的概念。 主軸:默認水平向

weixin_45674894 2020-07-04 23:35:04

外邊距的BUG及解決方式

1.相鄰塊元素垂直外邊距的合併 當上下相鄰的兩個元素相遇的時候,上面元素的有margin-bottom,下面的元素有margin-top時,兩者之間的間距並不是上下邊距之和,而是取兩者之間的較大者,這種現象稱之爲外邊距的塌陷。 如

weixin_45674894 2020-07-04 23:35:04

字體小圖標使用與優缺點

之前對換膚就是改變css與img中的路徑來進行切換，但是效果與打包後的文件都不理想。使用字體小圖標只要改變CSS中的font-size和color就可以。 現結合其他資料對其進行小總結下： 優勢 輕量級：一個圖標字體要比一系列的圖

零零历险记 2020-07-04 22:36:40

前端配色

常用色彩 【優設網】中國傳統色彩 【優設網】日本傳統色彩 【中國色】中國傳統色彩 【百圖匯】顏色表大全 【oschina在線工具】RGB顏色常用對照表 配色方案 【小影的工具箱】配色表 【COOLORS】配色工具 色彩工具

Cookie_fzx 2020-07-04 01:52:50