<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .one li {

            width: 100px;

            height: 30px;

            line-height: 30px;

            background: url(nav/libg.jpg) no-repeat;

            //float: left;

            text-align: center;

            margin-left: 10px;

            cursor: pointer;

            _display: inline;

            position: relative;

        }

        li ul {

            position: absolute;

            left: 0;

            top: 30px;

            display: none;

        }

        .cd{

            margin-top: -30px;

            margin-left: 65px;

        }

        li{

            list-style: none;

        }

    </style>

</head>

<body>

<ul class="one">

    <li id="li01">

        <span>一级菜单</span>

        <ul id="ul01"class="cd" >

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li id="li02">

        <span>一级菜单</span>

        <ul id="ul02" class="cd" >

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li id="li03">

        <span >一级菜单</span>

        <ul id="ul03"class="cd" >

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

</ul>

<script>

    function fn(canshu1,canshu2){

        var li01 = document.getElementById(canshu1);

        var ul01 = document.getElementById(canshu2);

        li01.onmouseover = function(){

            ul01.style.display = "block"

        }

        li01.onmouseout = function(){

            ul01.style.display = "none"

        }

    }

    fn("li01","ul01")

    fn("li02","ul02")

    fn("li03","ul03")

</script>

</body>

</html>

　　

JS CSS写下拉菜单 竖行的更多相关文章

  1. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  2. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  3. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  4. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  5. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  6. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  7. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  8. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

随机推荐

  1. SIGAI机器学习第十六集 支持向量机3

    讲授线性分类器,分类间隔,线性可分的支持向量机原问题与对偶问题,线性不可分的支持向量机原问题与对偶问题,核映射与核函数,多分类问题,libsvm的使用,实际应用 大纲: 多分类问题libsvm简介实验 ...

  2. JAVA的变量，数据类型与运算符

    1. 变量 计算机处理数据,变量被用来存储处理的数据,之所以叫做变量因为你可以改变存储的值.更确切的说,一个变量指向着一块存储特定类型值的地址,换句话说,一个变量有名称.类型和值.一个变量有一个名称, ...

  3. Postgresql 日志相关

    目录日志种类作用总结配置文件中与日志相关的配置日志种类 PostgreSQL有3种日志 pg_log(数据库运行日志)   内容可读    默认关闭的,需要设置参数启动pg_xlog(WAL 日志,即 ...

  4. PHP的输出语法

    一.echo 只能输出标量数据类型,对于任何数据都可以转为字符串输出 echo是PHP的一种特殊的'指令',不一定要像函数的那样()去使用,可以直接紧跟一个空格输出信息,可以是多个参数 <?ph ...

  5. 【优化算法】变邻域搜索算法(VNS)求解TSP（附C++详细代码及注释）

    00 前言 上次变邻域搜索的推文发出来以后,看过的小伙伴纷纷叫好.小编大受鼓舞,连夜赶工,总算是完成了手头上的一份关于变邻域搜索算法解TSP问题的代码.今天,就在此给大家双手奉上啦,希望大家能ENJO ...

  6. dashucoding记录2019.6.8

    WordPress网站 网址: https://cn.wordpress.org/ 阿里云市场 https://market.aliyun.com/products/53616009?spm=a2c4 ...

  7. [HNOI2011]括号修复 / [JSOI2011]括号序列

    传送门 Solution 一道题花费了两天的时间-- 在大佬@PinkRabbit的帮助下,终于AC了,感动-- 首先,我们考虑一个括号序列被修改成合法序列需要的次数: 我们需要修改的其实是形如... ...

  8. meshing-轴

    原视频下载地址:https://yunpan.cn/cqrJRm32dMmAL  访问密码 9dd9

  9. 调用微信公众平台扫一扫示例及解决接口报错 { "errMsg": "config:invalid signature" }

    一.解决报错问题 单从报错信息 invalid signature 就可以看出是 签名signature 有问题, 查了很多资料,终于知道了问题点, 后台让我直接调接口是不对的,签名是根据请求接口的页 ...

  10. sklearn里计算roc_auc_score，报错ValueError: bad input shape

    用sklearn的DecisionTreeClassifer训练模型,然后用roc_auc_score计算模型的auc.代码如下 clf = DecisionTreeClassifier(criter ...