```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>虎课网导航</title>
	<style>
		bady {
			margin: 0;
			padding: 0;
			font-size: 15px;
		}
		.nav {
			width: 100%;
			height: 40px;
			background-color: #FEF901;
		}
		.box {
			padding: 0;
			width: 560px;
			height: 40px;
			margin: 0 auto;
			position: relative;
		}
		.box li {
			width: 70px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			list-style: none;
			float: left;
			z-index: 9;
			position: relative;
		}
		.box li::before {
			content: "";
			width: 65px;
			height: 30px;
			background-color: #E7A32C;
			position: absolute;
			z-index: -9;
			top: 5px;
			left: 1px;
			border-radius: 10px;
			display: none;
		}
		.box li:first-child::after {
			content: url("images/images/sanjiao_02.png");
			width: 10px;
			height: 10px;
			position: absolute;
			left: 18px;
			top: -24px;
			display: none;
		}
		
		.tanchuang {
			width: 450px;
			height: 180px;
			position: absolute;
			top: 40px;
			display: none;
		}
		.neirong .top {
			width: 100%;
			height: 45px;
			border-bottom: 1px solid #e8e8e8;
		}
		.top p {
			padding-top: 10px;
			font-size: 14px;
			margin: 0 0 0 15px;
			float: left;
			color: #333333;
		}
		.top p span {
			font-size: 12px;
			margin-left: 20px;
			color: #999999;
		}
		.top .but {
			width: 90px;
			height: 30px;
			float: right;
			background-color: #F79F0F;
			border-radius: 3px 3px 0 0;
			text-align: center;
			line-height: 30px;
			margin: 7px 15px 0 0;
			color: white;
			font-size: 12px;
			cursor: pointer;
		}
		.bottom {
			width: 100%;
			height: 103px;
			
		}
		.left {
			width: 60px;
			float: left;
			text-align: center;
			font-size: 12px;
			color: #333;
		}
		.right {
			float: left;
			width: 390px;
			
		}
		.right span {
			float: left;
			width: auto;
			height: 26px;
			margin-left: 20px;
			color: #666;
			font-size: 12px;
			line-height: 26px;
			text-align: center;
			position: relative;
		}
		.right span:hover {
			content: "";
			width: auto;
			height: 26px;
			background-color: #f8f8f8;
			color: #E7C375;
			border-radius: 13px;
			cursor: pointer;
			padding: 0 5px;
		}
		.right span:first-child::before {
			content: "";
			width: 1px;
			height: 12px;
			background-color: #e8e8e8;
			position: absolute;
			top: 7.5px;
			left: -10px;
		}
		.box li:hover::before,
		.box li:hover::after,
		.box li:hover .tanchuang {
			display: block;
		}
		
	</style>
</head>
	
<body>
	<div class="nav">
		<ul class="box">
			<li>软件入门</li>
			<div class="tanchuang">
				<div class="neirong">
					<div class="top">
						<p>软件入门<span>233333人已学习</span></p>
						<div class="but">点击充值</div>
					</div>
					<div class="bottom">
						<div class="left">基础</div>
						<div class="right">
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AIaaaaaa</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
							<span>AI</span>
						</div>
					</div>
				</div>
			</div>
			<li>字体设计</li>
			<li>海报设计</li>
			<li>C4D教程</li>
			<li>图像合成</li>
			<li>综合设计</li>
			<li>产品精修</li>
			<li>系列课</li>
		</ul>
	</div>
</body>
</html>
```

当鼠标移入导航选项时二级菜单不显示问题寻求解决

总共已有 0 条评论