<div class="header-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="solution.html">解决方案</a>
<ul>
<li><a href="#">方案1</a></li>
<li><a href="#">方案2</a></li>
<li><a href="#">方案3</a></li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="case.html">案例简介</a>
<ul>
<li><a href="#">案例1</a></li>
<li><a href="#">案例2</a></li>
<li><a href="#">案例3</a></li>
</ul>
</li>
<li><a href="aboutUs.html">关于我们</a>
<ul>
<li><a href="aboutus.html">公司简介</a></li>
<li><a href="aboutUs-honnor.html">荣誉资质</a></li>
<li><a href="aboutus-corporatecultuer.html">企业文化</a></li>
<li><a href="aboutus-chairman.html">董事长致辞</a></li>
<li><a href="#">公司风采</a></li>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</li>
<li><a href="joinUs.html">加入我们</a></li>
</ul>
</div>
<!-- end 导航 -->
<script type="text/javascript">
/*
* 使用鼠标悬停事件效果
* * mouseover和mouseout
* * hover(over,out) - 模拟一个鼠标悬停事件
* * over - 用于模拟mouseover事件(处理函数)
* * out - 用于模拟mouseout事件(处理函数)
*/
$(".header-nav>ul>li").hover(function(){
// 显示子菜单 - slideDown
$(this).children("ul").slideDown("fast");
},function(){
// 隐藏子菜单 - slideUp
$(this).children("ul").slideUp("fast");
});
</script>
* {
margin:0;
padding:0;
}
/* start 头部样式*/
a {
color: #0287CA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header-nav{
margin-left: 200px;
display: inline-block;
}
.header-nav ul {
list-style: none;
}
.header-nav ul li {
background:url(../images/nav-logo.PNG) no-repeat;
float: left;
line-height: 30px;
margin-left: 29px;
width: 100px;
}
.header-nav li a {
text-decoration: none;
color: #fff;
padding-left: 18px;
font-size: 14px;
}
.nav-img {
margin-top: 10px;
text-align: center;
}
.header-nav ul li a:hover {
background:none;
color:#E78888;
}
.header-nav ul li ul{
position: absolute;
width:140px;
overflow:hidden;
display:none;
}
.header-nav ul li ul li{
text-align: left;
}
/* end 头部样式*/
})
})