案例所用知识点：
layui字体图标：<i class="layui-icon layui-icon-down"></i>
jq的hover事件：$().hover(function(){//鼠标划上时事件},function(){//鼠标划走时事件})
jq动画：$().animate(params,[speed],[easing],[fn])
* params:一组包含作为动画属性和终值的样式属性和及其值的集合
* speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
* easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". fn:在动画完成时执行的函数，每个元素执行一次。
jq的滑上、滑下效果：$().slideUp() $().slideDown()
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.24 导航条</title>
<link rel="stylesheet" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201809030202">
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201809030202"></script>
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.search{background: rgba(224, 224, 224, 0.6);text-align: center;padding: 10px 0;position: relative;box-shadow: 2px 0 3px #ddd;position: relative;top: -45px;}
.search form{background: #fff;display: inline-block;width: 960px;padding: 0 10px;height: 30px;line-height: 30px;border-radius: 3px;}
.search form input{float: left;height: inherit;border: none;width: 98%;}
.search form i{float: right;}
.down{position: absolute;top: 48px;background: #ffbc43;border-radius: 50%;padding: 5px;}
.down i{font-size: 30px;}
.box{width: 980px;margin: 30px auto;text-align: center;}
.nav{margin: 20px auto;background: #e4e4e4;line-height: 30px;display: inline-block;position: relative;}
.nav li{float: left;width: 90px;}
.nav li a{display: block;}
.nav1{position: relative;}
.nav1 ul{position: absolute;right: 0;top: 30px;display: none;}
.nav1 ul li{float: none;background: #e4e4e4;border-bottom: 2px solid #fff;}
.nav1 li i{position: absolute;top: 0px;right: 10px;font-size: 12px;}
.border{height: 2px;background: orange;position: absolute;width: 90px;left: 0;bottom: 0;}
</style>
</head>
<body>
<!-- 搜索框 -->
<div class="search">
<form action="">
<input type="text" name="search" placeholder="# 请输入关键词搜索 #" /><span><i class="layui-icon layui-icon-search"></i></span>
</form>
<span id="down" class="down"><i class="layui-icon layui-icon-tree"></i></span>
</div>
<!-- 导航 -->
<div class="box">
<ul class="nav">
<li><a href="" >要闻</a></li>
<li><a href="" >国际</a></li>
<li><a href="" >国内</a></li>
<li><a href="" >社会</a></li>
<li><a href="" >军事</a></li>
<li><a href="" >娱乐</a></li>
<li><a href="" >体育</a></li>
<li><a href="" >汽车</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a></li>
</ul>
<ul class="nav">
<li><a href="" >要闻</a></li>
<li><a href="" >国际</a></li>
<li><a href="" >国内</a></li>
<li><a href="" >社会</a></li>
<li><a href="" >军事</a></li>
<li><a href="" >娱乐</a></li>
<li><a href="" >体育</a></li>
<li><a href="" >汽车</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a></li>
<div class="border"></div>
</ul>
<ul class="nav nav1">
<li><a href="" >要闻</a></li>
<li><a href="" >国际</a></li>
<li><a href="" >国内</a></li>
<li><a href="" >社会</a></li>
<li><a href="" >军事</a></li>
<li><a href="" >娱乐</a></li>
<li><a href="" >体育</a></li>
<li><a href="" >汽车</a></li>
<li><a href="" >科技</a></li>
<li><a href="" >其他</a><i class="layui-icon layui-icon-down"></i>
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">呵呵</a></li>
<li><a href="">吼吼</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(function(){
// 导航效果 鼠标划上搜索框下拉
$('.search').hover(function(){
$('.search').find('input[name="search"]').focus();
$(this).stop().animate({top:'0'});
},function(){
$('.search').find('input[name="search"]').blur();
$(this).stop().animate({top:'-48px'});
})
// 第一条导航效果 鼠标划上背景变色
$('.box .nav').eq(0).children('li').hover(function(){
$(this).find('a').css({'background':'orange','color':'#fff'});
},function(){
$(this).find('a').css({'background':'','color':''});
})
// 第二条导航 鼠标划上下面的边框跟着动
$('.box .nav').eq(1).children('li').hover(function(){
var left = $(this).index()*$(this).width()+'px';
$('.border').stop().animate({left: left});
},function(){
$('.border').stop().animate({left:'0'});
})
// 第三条导航 带有子导航
$('.nav1 li').hover(function(){
$(this).find('ul').slideDown();
$(this).find('i').attr('class','layui-icon layui-icon-up');
},function(){
$(this).find('ul').slideUp();
$(this).find('i').attr('class','layui-icon layui-icon-down');
})
})
</script>
</body>
</html>效果图：
