纯html+css制作三级下拉菜单直⼊主题，html+css制作三级下拉菜单实现代码分享给⼤家，具体内容如下
1.html代码
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE>
2. <html>
3. <head>
4.    <meta charset="utf-8">
5.    <title>三级下拉菜单导航栏</title>
6.    <link rel="stylesheet" type="text/css" href="style.css">
7. </head>
8. <body bgcolor="aliceblue">
9.    <ul class="nav">
10.        <li>
11.            <a href="" target="_blank">
12. ⼿机数码<span class="triangle">▼</span></a>
13.            <ul>
14.                <li><a href="#" target="_blank">
15. ⼿机 <span class="triangle">▶</span>
16.                    </a>
17.                    <ul>
18.                        <li><a href="">⼩⽶</a></li>
19.                        <li><a href="">华为</a></li>
20.                        <li><a href="">魅族</a></li>
21.                    </ul>
22.                </li>
23.                <li><a href="">
24. 电脑 <span class="triangle">▶</span>
25.                    </a>
26.                    <ul>
27.                        <li><a href="">平板</a></li>
28.                        <li><a href="">笔记本</a></li>
29.                        <li><a href="">台式</a></li>
30.                    </ul>
31.                </li>
32.                <li><a href="">相机</a></li>
33.            </ul>
34.        </li>
35.        <li><a href="">男装⼥装<span class="triangle">▼</span></a>
36.            <ul>
37.                <li><a href="">
38. 上⾐ <span class="triangle">▶</span></a>
39.                    <ul>
40.                        <li><a href="">衬衫</a></li>
41.                        <li><a href="">T恤</a></li>
42.                    </ul>
43.                </li>
44.                <li><a href="">
45. 裤⼦ <span class="triangle">▶</span></a>
46.                    <ul>
47.                        <li><a href="">⽜仔裤</a></li>
48.                        <li><a href="">休闲裤</a></li>
49.                    </ul>
50.                </li>
51.            </ul>
52.        </li>
53.        <li><a href="">运动户外<span class="triangle">▼</span></a>
54.            <ul>
55.                <li><a href="">运动鞋</a></li>
56.                <li><a href="">运动服</a></li>
57.                <li><a href="">运动设备</a></li>
58.            </ul>
59.        </li>
60.        <li>
61.            <a href="">时尚百货</a>
62.        </li>
63.        <li><a href="">⽣活服务<span class="triangle">▼</span></a>
filter样式
64.            <ul>
65.                <li><a href="">万能缴费</a></li>
66.                    <ul>
67.                        <li><a href="">⽔费</a></li>
68.                        <li><a href="">电费</a></li>
69.                    </ul>
70.                <li><a href="">教育培训</a></li>
71.                <li><a href="">话费充值</a></li>
72.            </ul>
73.        </li>
74.        <li>
75.            <a href="">  汇吃美⾷</a>
76.        </li>
77.        <li>
78.            <a href="">  家居家纺<span class="triangle">▼</span></a>
79.            <ul>
80.                <li><a href="">
81.                    <span class="triangle">◀</span> 床上⽤品</a>
82.                    <ul class="nav1">
83.                        <li><a href="">被⼦</a></li>
84.                        <li><a href="">枕头</a></li>
85.                    </ul>
86.                </li>
87.                <li>
88.                    <a href=""><span class="triangle">◀</span> 客厅家具</a>
89.                    <ul class="nav1">
90.                        <li><a href="">茶具</a></li>
91.                        <li><a href="">沙发</a></li>
92.                        <li><a href="">椅⼦</a></li>
93.                    </ul>
94.                </li>
95.            </ul>
96.        </li>
97.    </ul>
98. </body>
99. </html>
2.CSS 代码
CSS Code复制内容到剪贴板
1. *{
2.        padding: 0;
3.        margin: 0;
4.    }
5.    ul{
6.        list-style-type:none;
7.    }
8.    .triangle{
9.
10.        font-size: 1em;
11.        color: white;
12.    }
13.    a{
14.        text-decoration:none;
15.        text-align: center;
16.        font-weight: bold;
17.
18.    }
19.    /*⼀级导航*/
20.    ul.nav{
21.        float: left;
22.        border:1px solid gray;
23.        margin-left: 10%;
24.        margin-top:10px;
es6 蔚来图片25.        border-radius: 4px;
26.        position: fixed;
27.    }
28.    ul.nav li{
29.        float: left;
30.        width: 9em;
31.        background-color:yellowgreen;
32.    }
33.    ul.nav a{
34.        display: block;
35.        color: white;
36.        line-height: 1.5em;
37.        border-right: 1px solid white;
38.        border-left: 1px solid white;
39.        padding: 5px;
40.    }
零基础自学机器人编程41.
42.    ul.nav a:hover,
43.    ul.nav a:focus{
44.        color: black;
45.        background-color: #98FB98;
46.        opacity: 0.5;
47.    }
48.    ul.nav li:first-child a{
49.        border-left: 0;
50.        border-bottom: 0;
51.    }
52.    ul.nav li:last-child a{
53.        border-right: 0;
54.        border-bottom: 0;
55.    }
56.    /*⼆级导航*/
57.    ul.nav li ul{
58.        width: 10em;
59.        position: absolute;
60.        left: -1000em;
61.    }
62.
html+css美食静态网页设计
63.    ul.nav li:hover ul{
64.        width: 10em;
65.        left:auto;
66.    }
67.
68.    ul.nav li ul a{
69.        border-top: 1px solid white;
70.        border-bottom: 1px solid white;
71.        border-left: 0;
72.        border-right: 0;
73.
74.    }
75.    /*三级导航*/
76.    ul.nav li:hover ul li ul{
77.        width: 10em;vue网上商城模板
78.        position: absolute;
79.        left: -1000em;
80.
css3按钮是什么81.    }
82.
83.    ul.nav li:hover ul li:hover ul{
84.        left: auto;
85.        margin-left: 9.1em;
86.        margin-top: -2.1em;
87.    }
88.    ul.nav li:hover ul li:hover ul.nav1{
89.        left: auto;
90.        margin-left: -9.1em;
91.        margin-top: -2.1em;
92.    }
以上就是本⽂的全部内容，欢迎⼤家学习完善。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。