                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /商城分類導航效果

請大神指點下，為何光標懸浮在主菜單時，我的二級菜單不能和主菜單在同一行

<!DOCTYPE?html>
<html>
<head>
	<title>選項卡</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;???//這是可完成懸浮時的背景改變效果
		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;????//這個是絕對的
		top:?40px;
		left:102px;
		width:?200px;
		height:?30px;
		border:1px?solid?#fba;
		z-index:?4;
	}
	</style>
</head>
<body>
??<ul?>
??	<li?><a?href="#">銷售</a>
??	??<div?class="sec">
??	??	這是銷售服務
??	??</div>
??	</li>
??	<li><a?href="#">庫存</a>
??	??
??	</li>
??	<li><a?href="#">財務</a>
??	?
??	</li>
??	<li><a?href="#">信息</a>
??	??
??	</li>
??</ul>

</body>
</html>

這是代碼

下面是運行結果