.nav-menu>li ul選擇器中ul里li的點(diǎn)去除問題

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標(biāo)題文檔</title>
<style?type="text/css">
@charset?"utf-8";
/*?CSS?Document?*/
body{
	background:#F4F4F4;
	}
.nav-menu{
	display:block;
	width:950px;
	background:#74adaa;
	margin:50px?auto?150px;
	}
.nav-menu>li{
	display:inline;/*使li的點(diǎn)消失*/
	float:left;
	border-right:1px?solid?#94c0be;
	}
.nav-menu>li:last-child{
	border-right:none;
	}
.nav-menu?li?a{
	display:block;
	padding:15px?30px?15px?31px;
	color:#fff;
	text-decoration:none;
	font-size:20px;
	line-height:20px;
	text-transform:capitalize;
	overflow:?visible;/*?????????*/
		}
/*搭建3d布景*/
.three-d{
	-webkit-perspective:200px;
	perspective:200px;
	-webkit-transition:all?0.07s?linear;
	transition:all?0.07s?linear;
	position:relative;
	}
.three-d:not(.active):hover?{
			??cursor:?pointer;
			}
.three-d:not(.active):hover?.three-d-box,?
.three-d:not(.active):focus?.three-d-box?{
			??-webkit-transform:?translateZ(-25px)?rotateX(90deg);
			??transform:?translateZ(-25px)?rotateX(90deg);
			}
.three-d-box{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
-webkit-transform:translatez(-25px);?
transform:translatez(-25px);?
-webkit-transform-style:preserve-3d;/*!!!!!!!*/
transform-style:preserve-3d;
??-webkit-transition:?all?.3s?ease-out;/*!!!!!!!*/
?transition:?all?.3s?ease-out;
	}

.front{
	-webkit-transform:rotatex(0deg)?translatez(25px);
	transform:rotatex(0deg)?translatez(25px);
	}
.back{
	-webkit-transform:rotatex(-90deg)?translatez(25px);
	transform:rotatex(-90deg)?translatez(25px);
	}
.front,.back{
	position:absolute;
	top:0;
	left:0;
	padding:?15px?30px?15px?31px;	
????width:?100%;
	height:?100%;
	display:?block;
????box-sizing:?border-box;
background:?#74adaa;/*!!!!!!!!!!*/
	}
.nav-menu?li?.active?.front,
			.nav-menu?li?.active?.back,
			.nav-menu?li?a:hover?.front,
			.nav-menu?li?a:hover?.back?{
			??background-color:?#51938f;
			}
.nav-menu?ul{
	position:absolute;
	width:150px;
	
	
	
	background:#74adaa;/*......*/
????font-size:14px;
????padding:0;
	-webkit-transform:?rotateX(-90deg);
	transform:?rotateX(-90deg);
????-webkit-transform-origin:?0px?0px;
	transform-origin:?0px?0px;
??
	}


.nav-menu?>?li:hover?ul?{
			??display:?block;
			??-webkit-transform:?rotateX(0deg);
			??transform:?rotateX(0deg);
			?
			}

.clearfix{
	overflow:hidden
	}

?

</style>
</head>

<body>
<div?class="nav">

<ul?class="nav-menu??unstyle">
<li>
<a?class="three-d?active"?href="#">home
<span?class="three-d-box">
<span?class="front">home</span>
<span?class="back">home</span>
</span>
</a>
</li>


<li>
<a?class="three-d"?href="#">services
<span?class="three-d-box">
<span?class="front">services</span>
<span?class="back">services</span>
</span>
</a>
</li>


<li>
<a?class="three-d"?href="#">products
<span?class="three-d-box">
<span?class="front">products</span>
<span?class="back">products</span>
</span>
</a>
</li>


<li>
<a?class="three-d"?href="#">about
<span?class="three-d-box">
<span?class="front">about</span>
<span?class="back">about</span>
</span>
</a>
</li>


<li>
<a?class="three-d"?href="#">contact
<span?class="three-d-box">
<span?class="front">contact</span>
<span?class="back">contact</span>
</span>
</a>
</li>


<li>
<a?class="three-d"?href="#">blog
<span?class="three-d-box">
<span?class="front">blog</span>
<span?class="back">blog</span>
</span>
</a>
<ul?class="drop-menu?clearfix?unstyle">
<li><a?class="three-d"?href="#">html5
<span?class="three-d-box">
<span?class="front">html5</span>
<span?class="back">html5</span>
</span>
</a></li>

<li><a?class="three-d"?href="#">css3
<span?class="three-d-box">
<span?class="front">css3</span>
<span?class="back">css3</span>
</span>
</a></li>

<li><a?class="three-d"?href="#">javascript
<span?class="three-d-box">
<span?class="front">javascript</span>
<span?class="back">javascript</span>
</span>
</a></li>

<li><a?class="three-d"?href="#">videogames
<span?class="three-d-box">
<span?class="front">videogames</span>
<span?class="back">videogames</span>
</span>
</a></li>
</ul>
</li>


<li>
<a?class="three-d"?href="#">shop?on-line
<span?class="three-d-box">
<span?class="front">shop?on-line</span>
<span?class="back">shop?on-line</span>
</span>
</a>
</li>


</ul>

</div>
</body>
</html>

在這個(gè)代碼中最外圍的ul里的li的點(diǎn)是設(shè)置了display:inline使點(diǎn)消失的（其實(shí)這里也不明白為什么設(shè)置inline會(huì)使點(diǎn)消失）。

外圍的ul中blog項(xiàng)里面也包含一個(gè)ul。這個(gè)ul里的li的點(diǎn)我是在最后面加了一個(gè)overflow:hidden才使點(diǎn)消失的。問題是我不明白什么原理，為什么會(huì)這樣？

我的問題就是，上述是什么原理為什么會(huì)這樣？

ps：至于為什么不用list-style-type，? 我發(fā)現(xiàn)使用list-style-type的效果只是使點(diǎn)消失但是還占據(jù)原來的位置，效果達(dá)不到居中。list-style-type效果就好像visibility:hidden一樣（visibility:hidden使元素隱藏，還占據(jù)空間；display:none使元素隱藏，并且不占據(jù)原來的空間）。