.nav-menu>li ul选择器中ul里li的点去除问题-慕课网

.nav-menu>li ul选择器中ul里li的点去除问题

来源：9-10 制作3D旋转导航综合练习题

qq_兜里有米_04383258

2017-06-05 23:23

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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的点消失*/
	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>

在这个代码中最外围的ul里的li的点是设置了display:inline使点消失的（其实这里也不明白为什么设置inline会使点消失）。

外围的ul中blog项里面也包含一个ul。这个ul里的li的点我是在最后面加了一个overflow:hidden才使点消失的。问题是我不明白什么原理，为什么会这样？

我的问题就是，上述是什么原理为什么会这样？

ps：至于为什么不用list-style-type，我发现使用list-style-type的效果只是使点消失但是还占据原来的位置，效果达不到居中。list-style-type效果就好像visibility:hidden一样（visibility:hidden使元素隐藏，还占据空间；display:none使元素隐藏，并且不占据原来的空间）。

写回答关注