zoukankan      html  css  js  c++  java
  • 横向导航二级菜单

    横向导航二级

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
    <style>
    *{ margin:0px; padding:0px; list-style:none; }
    body{ font-size:12px; }
    .nav{ float:left; clear:both; margin:100px; display:inline; }
    .nav li{ float:left; position:relative; }
    .nav li a{ display:block; 60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
    .nav li a:hover { background:#666; color:#fff; }
    .nav li ul{ position:absolute; display:none; }
    .nav li ul li { float:none; }
    .nav li ul li a{ background:#eee; }
    </style>
    </head>
    <body>
    <ul id="mainNav" class="nav" >
    <li><a href="javascript:void(0);">首 页</a></li>

    <li><a href="javascript:void(0);">导航菜单</a>
    <ul>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li>
    </ul>
    </li>

    <li><a href="javascript:void(0);" >企业采购</a>
    <ul>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li>
    </ul>

    </li>

    <li><a href="javascript:void(0);">行情报价</a>
    <ul>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li>
    </ul>
    </li>

    </ul>
    <script language="JavaScript" type="text/javascript">
    <!--
    $(document).ready(function(){
    var li = $("#mainNav > li"); //找到#mainNav中子元素li;
    var ul;
    li.each(function(i){ //循环每一个LI
    li.eq(i).hover(
    function(){
    $(this).find("ul").show(); //找到li里面的ul元素设置为显示
    },
    function(){
    $(this).find("ul").hide();
    }
    )
    })
    })
    //-->
    </script>
    </body>
    </html>

    =====================

  • 相关阅读:
    Python之Sklearn使用教程
    Centos 查看路径下所有文件中是否包含指定字符
    Centos7x 开启6379端口,Centos7x开启端口
    分享几个ip定位api【转】
    @Scheduled(cron = "* * * * * *")
    QueryRunner的使用
    linux redis重置密码、重启
    nginx里的sticky的作用
    windows环境xampp搭建php电商项目/搭建禅道
    hive中解决中文乱码
  • 原文地址:https://www.cnblogs.com/leshao/p/4651705.html
Copyright © 2011-2022 走看看