部分场合的css（隐藏元素和导航菜单）

1.CSS隐藏元素的几种方法    

• Opacity:元素本身依然占据它原本位置并对网页的布局起作用。它也将响应用户交互;.hide{ opacity:0;}
• Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

  .hide{visibility:hidden;}

• Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

  .hide{ display:none;}

• Position:不会影响布局，能让元素保持可以操作;

  .hide{position:absolute;top:-9999px;left:-9999px;}

• Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

  .hide{clip-path:polygon(0px0px,0px0px,0px0px,0px0px);}

2.导航菜单下的绝对定位

<div class="box">
    <ul class="nav clear">
	  <li class="cw_dropdown">
		<a href="">我的订单</a>
		<div class="dropdown">选择器
		   <p>我的消息</p>
		   <p>我的事情</p>
		   <p>待处理清单</p>
		</div>
	  </li>
	  <li><a href="">会员</a></li>
	  <li><a href="">客户服务</a></li>
	  <li class="cw_dropdown">
		<a href="">网站导航</a>
		<div class="dropdown">
		  <p>我的消息</p>
		  <p>我的事情</p>
		  <p>待处理清单</p>
		</div>
	 </li>
	 <li><a href="">企业采购</a></li>		
   </ul>			
</div>

**部分重点css**

1. li的子元素（a，.dropdown）都为定位元素
2. a的border颜色可以和背景色相同或者为透明色
3. li：hover状态下的a去掉border-bottom，添加padding-bottom（使a的高度比正常状态下高1px）并且z-index大于dropdown的z-index值

.nav li {float: left;position: relative;}

.nav li a{position: relative;border:1px solid #e2e3e4;}

.nav li:hover a{
    z-index: 3;
    border:1px solid #ccc;
    padding-bottom: 2px;
    border-bottom: none;
}
.dropdown{
    position: absolute;
    background: #fff;
    top:30px;
    left: 0px;
    border:1px solid #ccc;
}