demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实现下拉菜单效果</title>

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

<div id="menu">

    <ul>

        <li><a href="#">首页</a></li>

        <li><a href="#">课程学习</a>

            <ul>

                <li><a href="#">JavaScript</a></li>

                <li><a href="#">HTML5</a></li>

            </ul>

        </li>

        <li><a href="#">学习中心</a>

            <ul>

                <li><a href="#">论坛学习</a></li>

                <li><a href="#">案例学习</a></li>

                <li><a href="#">交流平台</a></li>

            </ul>

        </li>

        <li><a href="#">经典案例</a>

            <ul>

                <li><a href="#">手风琴效果</a></li>

                <li><a href="#">分类导航</a></li>

                <li><a href="#">tag选项</a></li>

            </ul>

        </li>

        <li><a href="#">关于我们</a></li>

    </ul>

</div>

</body>

</html>

　demo.css　

*{ margin:0px; padding:0px;}

#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}

ul{ list-style:none;}

ul li{ float:left;  line-height:40px; text-align:center; position:relative;}

a{ text-decoration:none; color:#000; display:block; width:90px;}

a:hover{ color:#FFF; background-color:#666;}

ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }

ul li ul{   display:none; width:90px; position:absolute;}

ul li:hover ul{ display:block;}

　　效果：

2017-09-06   11:20:46

html/css 实现下拉菜单效果的更多相关文章

  1. HTML+CSS写下拉菜单

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

  2. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

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

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

  7. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

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

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

  9. 纯css实现下拉菜单

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

随机推荐

  1. Xcode之增加环境变量(多种环境区分)

    序言: Xcode默认有DEBUG何RELEASE模式,如果我们在项目中想增加预发布环境或者再增加多个环境呢?如果在项目中用if else 弄个全局变量来控制,每次打包之前去手动修改,这样不仅繁琐,而 ...

  2. MapServer教程

    https://mapserver.org/ MapServer是一个开放源代码平台,用于将空间数据和交互式地图应用程序发布到Web.由OSGEO批准的MapServer项目指导委员会(PSC)负责管 ...

  3. lightoj1094 - Farthest Nodes in a Tree

    1094 - Farthest Nodes in a Tree   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limi ...

  4. sql-hive笔试题整理 1 (学生表-成绩表-课程表-教师表）

    题记:一直在写各种sql查询语句,最长的有一百多行,自信什么需求都可以接,可......,想了想,可能一直在固定的场景下写,平时也是以满足实际需求为目的,竟不知道应试的题都是怎么出的,又应该怎么做.遂 ...

  5. laravel5.6 常规框架部署和配置文件说明

    示例demo文件位置: 入口默认index.php文件地址: 例如: /laravel5.6/public/index.php (1) 必须先初始化路由web.php文件地址: 例如: /larave ...

  6. xiugai-去除js注释

    <div class="myLoading"> <div class="svg-wrap"> <svg width="8 ...

  7. loj#2333 「JOI 2017 Final」准高速电车

    分析 我们发现到达一个点一定是先快车再准快车再慢车 于是快车将1-n分为多个区间 每次取出每个区间当前能到达的点的数量 选剩余时间贡献最大的的一个取得贡献并且再能到达的最远点建立准快车 代码 #inc ...

  8. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  9. websocket初体验

    (function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...

  10. 腾讯开源微服务架构 Tars，高性能 RPC 开发框架

    腾讯微服务架构 Tars 于今日正式开源. Tars 取名于电影“星际穿越”中的机器人,是支持多语言的高性能 RPC 开发框架和配套一体化的服务治理平台,可以帮助企业或者用户以微服务的方式快速构建稳定 ...