css三级下拉菜单代码

公司官网demo样例

**

html结构

**

<div id="nav">
        <ul>
            <li><a href="###">首页</a></li>
            <li><a href="###">公司简介</a>
                <ul>
                    <li><a href="###">公司简介</a></li>
                    <li><a href="###">发展历程</a></li>
                </ul>
            </li>
            <li><a href="###">新闻动态</a>
                <ul>
                    <li><a href="###">行业新闻</a>
                        <ul>
                            <li><a href="###">前沿科技</a></li>
                            <li><a href="###">国外资讯</a></li>
                            <li><a href="###">行业信息</a></li>
                        </ul>
                    </li>
                    <li><a href="###">企业动态</a></li>
                </ul>
            </li>
            <li><a href="###">产品中心</a>
                <ul>
                    <li><a href="###">产品种类</a>
                        <ul>
                            <li><a href="###">传统设备</a></li>
                            <li><a href="###">外部设备</a></li>
                            <li><a href="###">智能设备</a></li>
                        </ul>
                    </li>
                    <li><a href="###">产品列表</a>
                        <ul>
                            <li><a href="###">CPU</a></li>
                            <li><a href="###">内存</a></li>
                            <li><a href="###">硬盘</a></li>
                        </ul>
                    </li>
                    <li><a href="###">产品列表</a>
                        <ul>
                            <li><a href="###">CPU</a></li>
                            <li><a href="###">内存</a></li>
                            <li><a href="###">硬盘</a></li>
                        </ul>
                    </li>
                    <li><a href="###">产品列表</a>
                        <ul>
                            <li><a href="###">CPU</a></li>
                            <li><a href="###">内存</a></li>
                            <li><a href="###">硬盘</a></li>
                        </ul>
                    </li>
                    <li><a href="###">产品列表</a>
                        <ul>
                            <li><a href="###">CPU</a></li>
                            <li><a href="###">内存</a></li>
                            <li><a href="###">硬盘</a></li>
                        </ul>
                    </li>
                    <li><a href="###">产品列表</a>
                        <ul>
                            <li><a href="###">CPU</a></li>
                            <li><a href="###">内存</a></li>
                            <li><a href="###">硬盘</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="###">服务支持</a>
                <ul>
                    <li><a href="###">驱动下载</a></li>
                    <li><a href="###">在线咨询</a></li>
                </ul>
            </li>
            <li><a href="###">联系我们</a></li>
        </ul>
    </div>

**

css（注释）

**

.box {
	width:200px;
	height:200px;
	transform-style:preserve-3d;
	position:relative;
	margin:100px auto 20px;
	transform:rotateX(20deg) rotateY(20deg);
	cursor:pointer;
	transition:all 1s;
}
.box:hover {
	transform:rotateX(20deg) rotateY(230deg)
}
.box div {
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	font-size:100px;
	font-weight:bolder;
	color:#fff;
	/* 让6个面全部定位在父元素里面 */
				position:absolute;
	left:0;
	top:0;
	opacity:0.5;
	/* 透明 */
				border:2px solid #000;
	transition:all 1s ease;
}
.box div:nth-child(1) {
	transform:translateZ(100px);
	background-color:rgba(36,85,75,0.5);
}
.box:hover div:nth-child(1) {
	transform:translateY(100px) translateZ(100px);
}
.box div:nth-child(2) {
	transform:translateZ(-100px) rotateY(180deg);
	background-color:rgba(36,255,1,0.5);
}
.box:hover div:nth-child(2) {
	transform:translateZ(-100px) translateY(100px)  rotateY(180deg);
}
.box div:nth-child(3) {
	transform:translateX(-100px) rotateY(-90deg);
	background-color:rgba(25,62,75,0.5);
}
.box:hover div:nth-child(3) {
	transform:translateX(-100px) rotateY(-90deg);
}
.box div:nth-child(4) {
	transform:translateX(100px) rotateY(90deg);
	background-color:rgba(25,62,75,0.5);
}
.box:hover div:nth-child(4) {
	transform:translateX(100px) rotateY(90deg);
}
.box div:nth-child(5) {
	transform:translateY(100px) rotateX(90deg);
	background-color:rgba(255,62,26,0.5);
}
.box:hover div:nth-child(5) {
	transform:translateY(100px) translateY(100px) rotateX(90deg);
}
.box div:nth-child(6) {
	transform:translateY(-100px) rotateX(-90deg);
	background-color:rgba(255,62,26,0.5);
}
.box:hover div:nth-child(6) {
	transform:translateY(-100px) rotateX(-90deg);
}

三级下拉菜单，2019.2已使用部署