导航栏,菜单栏下拉简单实现

导航栏,菜单栏下拉简单实现

先看看效果图
导航栏,菜单栏下拉简单实现_第1张图片

导航栏,菜单栏下拉简单实现_第2张图片



<html lang="ZH-CN">
<head>
    <meta charset="utf-8">
    <title>导航栏,菜单栏下拉简单实现title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
    <style type="text/css">
        /*样式初始化*/
        body, dl, dd, h1, h2, h3, h4, h5, h6, p, form,ul,ol{margin:0; padding:0;}
        ol,ul { list-style:none; }
        .nav span{ 
            display: inline-block;
            height:36px; 
            width:120px; 
            background: #ff9900; 
            line-height: 36px; 
            text-align: center; 
            position: relative;  
       }
        .nav ul{ 
            position: absolute; 
            width:120px; 
            display: none; 
            background: #f90  
        }
    style>
head>
<body>
    <div class="nav">
        <span>导航栏-1
            <ul>
                <li>1-1li>
                <li>1-2li>
                <li>1-3li>
            ul>
        span>
        <span>导航栏-2
            <ul>
                <li>1-1li>
                <li>1-2li>
                <li>1-3li>
            ul>
        span>
        <span>导航栏-3
            <ul>
                <li>1-1li>
                <li>1-2li>
                <li>1-3li>
            ul>
        span>
    div>
body>
html>
<script type="text/javascript">
    //hover接收2个参数,第一个是经过,第二个是离开;
    $('.nav span').hover(function(){
        $(this).find('ul').show();
    },function(){
        $(this).find('ul').hide();
    });
script>

你可能感兴趣的:(导航栏-菜单栏下拉简,下拉菜单,jq菜单,脚本语言,组件)