注意点：

　　　　1.设置a标签的width 和 height 的时候，直接设置是没用的，可以以这样两种方式设置

　　　　　　(1).　　display：block;

　　　　　　(2).　　float:left;

　　　　

　　　　2.设置下拉菜单，最重要的是

　　　　　　(1).用定位   position: absolute; 定义  li 标签下面的ul 标签,隐藏2级栏目,display:none;

　　　　　　(2).将li列表的浮动效果取消,float:none;

　　　　　　(3).然后定义鼠标滑过  li标签定义的效果， li : hover ul {display:block};

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉菜单</title>

    <style type="text/css">

        body ul{

            margin: 0 auto;

            padding: 0;

        }

        ul li {

            list-style: none;

        }

        a {

            text-decoration: none;

        }

        .nav {

            margin: 40px 0 0 450px;

            border: 1px solid #ccc;

            float: left;

        }

        .nav ul li {

            float: left;

        }

        .nav ul li a {

            width: 100px;

            height: 30px;

            border: 1px solid black;

            background-color: #49D82D;

            color: #ffffff;

            display: block;

            text-align: center;

            line-height: 30px;

        }

        .nav ul li a:hover {

            background: #45B0D1;

        }

        .nav ul li ul {

            position: absolute;

            display: none;

        }

        .nav ul li ul li {

            float: none;

        }

        .nav ul li ul li a {

            border-right: none;

            border-top: 1px dotted #ccc;

        }

        .nav ul li:hover ul {

            display: block;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="">栏目1</a>

                <ul>

                    <li><a href="">二级栏目1</a></li>

                    <li><a href="">二级栏目2</a></li>

                    <li><a href="">二级栏目3</a></li>

                    <li><a href="">二级栏目4</a></li>

                </ul>

            </li>

            <li><a href="">栏目2</a></li>

            <li><a href="">栏目3</a></li>

            <li><a href="">栏目4</a></li>

        </ul>

    </div>

</body>

</html>

11.css定义下拉菜单的更多相关文章

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

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

  2. HTML+CSS写下拉菜单

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

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

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

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

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

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

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

  6. 纯css实现下拉菜单

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

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

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

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

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

  9. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

随机推荐

  1. memcache命令行

    memcache运行状态可以方便的用stats命令显示. 首先用telnet 127.0.0.1 11211  [quit 退出]这样的命令连接上memcache,然后直接输入stats就可以得到当前 ...

  2. ubuntu12.04打开某一个已安装的软件的方法

    1.快捷键win+A,里面显示已安装的软件 2.打开左上角的dash home,即ubuntu标志图,输入想要打开的软件 还有其它方法,探索中... .

  3. IoC容器Autofac学习笔记

    一.一个没有使用IoC的例子 IoC的全称是Inversion of Control,中文叫控制反转.要理解控制反转,可以看看非控制反转的一个例子. public class MPGMovieList ...

  4. Atitit.木马病毒的操作注册表原理 系统服务管理器 atiSysService

    Atitit.木马病毒的操作注册表原理 系统服务管理器 atiSysService 1. atiSysService1 2. atiSysService  原理1 3. Java code1 4. 参 ...

  5. 反射学习2-通过反射机制动态获取属性的值模拟Struts的自动赋值

    一.准备知识:   Java反射机制   处理事务的JavaBean   String的操作常用方法 二.模拟步骤   这里我们通过反射机制动态获取属性的值模拟Struts中的自动赋值. 1.首先创建 ...

  6. VM虚拟机不能上网的问题解决

    VM虚拟机不能上网的问题解决 说在前面的话:很多网友看了我的文章后,虚拟机还是不能上网,就联系我帮忙,结果帮他们给弄好后,都说怪自己太粗心,没有仔细看文章.我不是怕网友麻烦我,我是真诚的希望各位要首先 ...

  7. GCD 莫比乌斯反演 给定整数N，求1<=x,y<=N且Gcd(x,y)为素数的 数对(x,y)有多少对.

    /** 题目:GCD 链接:https://vjudge.net/contest/178455#problem/E 题意:给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的 数对( ...

  8. JDK7 Garbage Frist

    JDK7 G1新型垃圾回收器. http://www.infoq.com/cn/articles/jdk7-garbage-first-collector

  9. va_list中的_vsntprintf使用介绍

    相信大家都用过sprintf这个函数,就是下面这样: int sprintf( char *buffer, const char *format [, argument] ... ); 在之前看到了用 ...

  10. ASP.NET中26种性能优化方法

    系统类  Type类,Object类,String类, Arrary类,Console类, Exception类,GC类, MarshalByRefObject类, Math类. DateTime结构 ...