此作品是一款简洁大气的橙色导航菜单，可以直接拿来使用，是今天查看猎豹免费WiFi网站的时候觉得好看就把它整理出来第一时间与大家分享，没有用任何的jquery或javascript代码，纯css样式代码实现，兼容性好，实现了鼠标悬浮亮灯效果，很酷，希望大家可以好好利用哦。。。
核心css样式代码如下：
.head-container,.banner,.content,.footer {
width:980px;
margin:0 auto
}
.header {
background:#EC6404;
width:100%;
height:57px
}
.header h1 {
display:none
}
.head-logo {
margin-top:5px;
margin-left:10px
}
.head-nav a {
position:relative;
display:inline-block;
float:left;
color:#F7D1AA;
font-size:14px;
width:100px;
line-height:57px;
text-align:center;
text-decoration:none
}
.hov-bg {
display:none;
z-index:1;
position:absolute;
height:67px;
width:136px;
left:-20px;
top:0;
background:url(../../assets/images/nav-highlight-l.jpg) no-repeat top
}
.link {
position:relative;
z-index:2
}
.link:hover {
color:#F4EEF3;
font-weight:900
}
.head-nav a:hover .hov-bg {
display:block;
font-weight:600
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
猎豹免费WiFi 导航菜单 悬停特效 鼠标悬浮