css页面头部的隐藏区域的设置

当鼠标一上去后显示下面区域。
没有移上去的页面

鼠标以上效果

html代码

<div class="top_font f_r">
					
					<a href="#">
							<span class="help_lpic"></span>
							帮助中心
							<span class="help_rpic"></span></a>
				</div>
				<div class="top_help">
					<ul class="top_help_list">
						<li><a href="#">在线咨询</a></li>
						<li><a href="#">投诉订单</a></li>
						<li><a href="#">查询订单</a></li>
						<li><a href="#">常见问题</a></li>
					</ul>
				</div>

css代码

.top_help{
	width: 100px;
	border: 1px solid #ddd;
	/* z-index 改变层次优先级*/
	/* z-index: 1; */
	position: absolute;
	right: 4px;
	top: 7px;
	padding-top: 25px;
}
.top_help_list{
	background-color: #fff;
	display: none;
}

.top_help_list li{
	height: 25px;
	text-align: center;
	border-top: 1px solid #ddd;
	line-height: 25px;
}

.top_help_list li a{
	color: #777;
}

.top_help_list li a:hover{
	color: #f60;
}

原型图显示

还有一种是不要添加padding-top属性，ul是在显示的子元素中

<span class="website_nav">
    	 <span class="wangzhan ul_li_li">网站导航</span>
       <div class="website_nav_info">
                 <ul>
                       <li><a href="#">客服邮箱</a></li>
                      <li><a href="#">金融咨询</a></li>
                    <li><a href="#">企业客服</a></li>
                   <li><a href="#">成长中心</a></li>
        	 </ul>
        </div>
        <span><img src="images/t_arrow.gif"></span>
  </span>