<无线自主点餐系统>html普通导航栏实现，仿宾之郎，不做商业用途

首先是想把我自己毕业设计的一小部分记录下来，从7月26号开始，到今天已经一个多月了，期间把需求文档和设计文档也写出来，不可能一点错误没有，等到全部做完我会po上来，当做给自己的大学四年画上句号。废话不多说，有做无线点餐系统可以关注我。
今天我只实现导航栏，翻看我之前发的就会发现，我是HTML新手小白。

这很容易看出来是实现li二级列表的滑动
css的代码：

header{    width: 100%;    height: 91px;    background-color: #c9151e;    overflow: hidden;}header section{    width: 1200px;    height: 91px;    margin: 0 auto;    background-color: white;}header section .logo{    width: 166px;    height: 91px;    float: left;    background-repeat: no-repeat;    background-image: url(img/logo_02.png);}#logoImg{    position: absolute;    top: 0px;    left: 10px;    width: 300px;    height: 91px;}header section .nav{    width: 804px;    height: 91px;    float: left;}header section .nav ul{    list-style: none;    padding: 0;    width: 804px;    height: 91px;}header section .nav ul .li{    width: 100.5px;    height: 91px;    float: left;    text-align: center;    line-height: 91px;    font-size: 14px;}header section .nav ul .li .a{    /*color: #555555;*/    text-decoration: none;    display: inline-block;    height: 16px;    line-height: 16px;    border-left: 1px solid #E8E8E8;    width: 100.5px;    text-align: center;    font-family: "微软雅黑",sans-serif;}header section .nav ul .li:hover .a{    color: #C9151E;}header section .nav ul .li:hover .firsta{    color: #C9151E;}header section .nav ul .li ul{    width: 240px;    padding: 0;    list-style: none;    z-index: 50;    position: absolute;    height: 0;    overflow: hidden;}header section .nav ul .li ul li{    height: 0px;    width: 240px;    border-bottom: 1px solid #E8E8E8;    background-color: rgba(255,255,255,.9);    line-height: 50px;    text-align: left;}header section .nav ul .li:hover ul li{    height: 50px;}header section .nav ul .li:hover ul {    border-top: 3px solid #C9151E;    height: auto;}header section .nav ul .li ul li a{    color: #555555;    text-decoration: none;    border: none;    width: auto;    margin-left: 40px;    /*position: absolute;*/    /*z-index: 10;*/}header section .nav ul .li ul li:hover a{    color: #C9151E;    font-weight: bold;}header section .icon{    width: 185px;    height: 91px;    float: left;    list-style: none;    padding: 0;}#qr{    width: 100px;    height: 120px;}header section .icon li{    height: 34px;    width: 34px;    border: solid 1px #D3AC5C;    border-radius: 17px;    float: left;    margin-left: 6px;    margin-top: 27.5px;    background-image: url(img/top_email.png);    cursor:pointer;    background-size: 25px;    background-position: center;    background-repeat: no-repeat;}header section .right{    width:45px ;    height: 91px;    float: left;    background-repeat: no-repeat;    background-image: url(img/head_bg.png);}header section .right div{    margin-left: 100%;    background-color: #e50014;    height: 91px;    width: 1000px;}header section .icon div:hover{    border: #c9151e 1px solid;    background-color: #c9151e;}header section .icon .two{    background-image: url(img/erweima.png);}header section .icon .three{    position: relative;    background-image: url(img/sousuo.png);}header section .icon .four{    background-image: url(img/tel.png);}header section .icon input{    height: 34px;    width: 0px;    border-radius: 18px;    border: solid 1px #D3AC5C;    position: absolute;    right: -1px;    top: -1px;    text-indent: 2em;    display: none;    outline: none;}header section .icon .three:hover input{    width: 220px;    border: solid 1px #D3AC5C;    display: block;}header section .icon .two{    overflow: hidden;}header section .icon .two .a{    position: absolute;    width: 120px;    height: 0px;    border: 1px solid transparent;    background: none;    border-radius: 0;    z-index: 100;    margin: 0;    padding: 0;    background-color: white;    overflow: hidden;    margin-top: 45px;    margin-left: -45px;}header section .icon .two .a div{    width: 120px;    height: 100px;    padding-left: 10px;    margin-top: 5px;    background: none;    border-radius: 0;    border: none;    position: absolute;    top: 0;}header section .icon .two .a span{    display: block;    width: 120px;    height: 20px;    text-align: center;    line-height: 20px;    color: #C8C8C8;    position: absolute;    bottom: 0;    padding-bottom: 10px;    /*font-family: "微软雅黑",sans-serif;*/    /*font-weight: normal;*/    font-size: 14px;    color: #555555;}header section .icon .two:hover .a{    /*display: block;*/    height: 140px;    border: 1px solid #D3AC5C;}header section .icon .one:hover{    background-image: url(img/email_bai.png);}header section .icon .two:hover{    background-image: url(img/erweima_bai.png);}header section .icon .three:hover{    background-image: url(img/sousuo_bai.png);}header section .icon .four:hover{    background-image: url(img/tel_bai.png);}header section .icon li:hover{    background-color: #C9151E;    border: 1px solid #C9151E;}#logoImg{    position: absolute;    left: 25px;}

body的代码：

<header>    <section>        <div class="logo">            <img id="logoImg" src="img/logo.png">        </div>        <div class="nav">            <ul>                <li class="li">                    <a href="AdministratorMain.html" target="_blank"class="firsta">首页</a></li>                <li class="li">                    <a  href="#" target="_blank" class="a">餐桌信息</a>                    <ul>                        <li><a href="../Table/Table.html">添加餐桌信息</a></li>                    </ul>                </li>                <li class="li">                    <a href="#" target="_blank" class="a">菜品信息</a>                    <ul>                        <li><a href="#" target="_blank">添加菜品信息</a></li>                        <li><a href="#" target="_blank">修改菜品信息</a></li>                        <li><a href="#" target="_blank">屏蔽菜品信息</a></li>                    </ul>                </li>                <li class="li">                    <a href="#" target="_blank" class="a">服务员信息</a>                    <ul>                        <li><a href="#" target="_blank">添加服务员信息</a></li>                        <li><a href="#" target="_blank">查询服务员信息</a></li>                        <li><a href="#" target="_blank">修改服务员信息</a></li>                        <li><a href="#" target="_blank">删除服务员信息</a></li>                    </ul>                </li>                <li class="li">                    <a href="#" target="_blank" class="a">优惠券</a>                    <ul>                        <li><a href="#" target="_blank">发放优惠券</a></li>                        <li><a href="#" target="_blank">查询优惠券信息</a></li>                    </ul>                </li>                <li class="li">                    <a href="#" target="_blank" class="a">折扣信息</a>                    <ul>                        <li><a href="#" target="_blank">菜价优惠</a></li>                        <li><a href="#" target="_blank">办理会员</a></li>                    </ul>                </li>                <li class="li"><a href="#" target="_blank" class="a">查看评价</a></li>                <li class="li"><a href="#" target="_blank" class="a">数据分析</a></li>            </ul>        </div>        <ul class="icon">            <li class="one"></li>            <li class="two">                <div class="a">                    <div ><img id="qr" src="img/qr.jpg"/></div>                    <span>扫描二维码</span>                </div>            </li>            <li class="three">                <input type="text" name="search" placeholder="请输入关键词"/>            </li>            <li class="four"></li>        </ul>        <div class="right">            <div></div>        </div>    </section></header>

js的代码：

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script>        jQuery(function($){            $('#demo1').slideBox();            $('#demo2').slideBox({                direction : 'top',//left,top#方向                duration : 0.3,//滚动持续时间，单位：秒                easing : 'linear',//swing,linear//滚动特效                delay : 5,//滚动延迟时间，单位：秒                startIndex : 1//初始焦点顺序            });            $('#demo3').slideBox({                duration : 0.3,//滚动持续时间，单位：秒                easing : 'linear',//swing,linear//滚动特效                delay : 5,//滚动延迟时间，单位：秒                hideClickBar : false,//不自动隐藏点选按键                clickBarRadius : 10            });            $('#demo4').slideBox({                hideBottomBar : true//隐藏底栏            });        });    </script>

注意：jquery-1.7.1.min.js要自己下载