css3 三级菜单导航栏

最新推荐文章于 2024-07-12 16:38:36 发布

俊刚、

最新推荐文章于 2024-07-12 16:38:36 发布

阅读量1.8k

点赞数

分类专栏： 2020以前文章标签： css3 3级菜单

本文链接：https://blog.csdn.net/csdn9_14/article/details/52821835

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

css3制作的三级菜单导航栏：

效果图：

这个是垂直菜单栏：

代码：

<span style="font-size:24px;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 3级菜单</title>
<style>
	*{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
	a{text-decoration:none;display:block;transition:transform 1s;-webkit-transition:-webkit-transform 1s;}
	a:hover{background:#F9F;transform:rotateX(720deg);-webkit-transform:rotateX(720deg);}
	.box{width:400px;margin:50px 0px;}
	.box ul li{width:120px;height:40px;line-height:40px;text-align:center;display:block;box-shadow:0px 0px 1px #036;background-color:#CFC;}
	.box ul li:hover ul{display:block;}
	.box ul li ul{display:none;</span><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;">position:relative; top:-40px; left:120px;</span></span><span style="font-size:24px;">}
	.box ul li ul li:hover ul{visibility:visible;}
	.box ul li ul li ul{visibility:hidden;position:relative;top:-40px;left:120px;}
</style>
</head>

<body>
	<div class="box">
    	<ul>
        	<li><a href="#">导航菜单1</a>
            	<ul>
                	<li><a href="#">二级菜单1-1</a>
                    	<ul>
                        	<li><a href="#">三级菜单1-1-1</a></li>
                            <li><a href="#">三级菜单1-1-2</a></li>
                            <li><a href="#">三级菜单1-1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单1-2</a>
                    	<ul>
                        	<li><a href="#">三级菜单1-1-1</a></li>
                            <li><a href="#">三级菜单1-1-2</a></li>
                            <li><a href="#">三级菜单1-1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单1-3</a></li>
                    <li><a href="#">二级菜单1-4</a></li>
                </ul>
            </li>
            <li><a href="#">导航菜单2</a>
            	<ul>
                	<li><a href="#">二级菜单1-1</a>
                    	<ul>
                        	<li><a href="#">三级菜单1-1-1</a></li>
                            <li><a href="#">三级菜单1-1-2</a></li>
                            <li><a href="#">三级菜单1-1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单1-2</a></li>
                    <li><a href="#">二级菜单1-3</a></li>
                    <li><a href="#">二级菜单1-4</a></li>
                </ul>
            </li>
            <li><a href="#">导航菜单3</a></li>
            <li><a href="#">导航菜单4</a></li>
            <li><a href="#">导航菜单5</a></li>
            <li><a href="#">导航菜单6</a></li>
        </ul>
    </div>
</body>
</html>

</span>

水平菜单栏代码：

将css代码换成如下代码：

<style>
	*{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
	a{text-decoration:none;display:block;transition:transform 1s;-webkit-transition:-webkit-transform 1s;}
	a:hover{background:#F9F;transform:rotateX(720deg);-webkit-transform:rotateX(720deg);}
	.box{width:800px;margin:50px 200px;}
	.box ul li{width:120px;height:40px;line-height:40px;text-align:center;display:block;box-shadow:0px 0px 1px #036;background-color:#CFC;float:left;}
	.box ul li:hover ul{display:block;}
	.box ul li ul{display:none;position:relative; top:0px; left:0px;}
	.box ul li ul li:hover ul{visibility:visible;}
	.box ul li ul li ul{visibility:hidden;position:relative;top:-40px;left:120px;}
</style>

以上就是我自己制作的简单的3级菜单导航栏。