                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /商城分類(lèi)導(dǎo)航效果

請(qǐng)大神指點(diǎn)下，為何光標(biāo)懸浮在主菜單時(shí)，我的二級(jí)菜單不能和主菜單在同一行

<!DOCTYPE?html>
<html>
<head>
	<title>選項(xiàng)卡</title>
	<meta?charset="utf-8">
	<style?type="text/css">
	*{
		padding:?0;
		margin:?0;
	}
	ul{

		list-style:?none;
		border:1px?solid?black;
		width:?80px;
		height:?120px;
		margin-left:20px;
		margin-top:?40px;?
		//display:?block;
	}
	li{
		height:?30px;
		line-height:?30px;
		text-align:?center;
???????z-index:?3;

	}	
	a{
		display:?block;???//這是可完成懸浮時(shí)的背景改變效果
		text-decoration:?none;
		color:?black;
	}
	a:hover{
		color:?white;
		background-color:?#ccc;
		font-weight:?bold;
	}
	li:hover{
		border:1px?solid?#DDD;
		border-right:?0;
		box-shadow:?0?0?8px?#fba;
	}
	li:hover?.sec{
		display:?block;
	}?
	.sec{
		display:none;
		position:absolute;????//這個(gè)是絕對(duì)的
		top:?40px;
		left:102px;
		width:?200px;
		height:?30px;
		border:1px?solid?#fba;
		z-index:?4;
	}
	</style>
</head>
<body>
??<ul?>
??	<li?><a?href="#">銷(xiāo)售</a>
??	??<div?class="sec">
??	??	這是銷(xiāo)售服務(wù)
??	??</div>
??	</li>
??	<li><a?href="#">庫(kù)存</a>
??	??
??	</li>
??	<li><a?href="#">財(cái)務(wù)</a>
??	?
??	</li>
??	<li><a?href="#">信息</a>
??	??
??	</li>
??</ul>

</body>
</html>

這是代碼

下面是運(yùn)行結(jié)果