效果截图（颜色有点丑，请无视）：

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            * {

                margin: 0;

                padding: 0;

                outline: 0;

            }

            ul,

            li {

                list-style: none;

            }

            a {

                text-decoration: none;

            }

            .nav {

                content: '';

                display: table;

                clear: both;

                box-sizing: border-box;

                padding: 50px;

            }

            .nav li.list-li {

                position: relative;

                float: left;

                width: 120px;

                height: 40px;

                line-height: 40px;

                font-weight: bold;

                border: 1px solid #486b02;

                border-right: 0;

                background-color: #27AE60;

                text-align: center;

                box-sizing: border-box;

            }

            .nav>li.list-li:last-child {

                border-right: 1px solid #486B02;

            }

            .nav li.list-li ul {

                display: none;

                position: absolute;

                top: 39px;

                left: -1px;

                width: 120px;

                border: 1px solid #8BD400;

                border-top: 0px;

                border-right: 0;

                cursor: pointer;

                box-sizing: border-box;

            }

            .nav li.list-li ul.ul-last {

                border-right: 1px solid #8BD400;

            }

            .nav .list-li:hover ul {

                display: block;

                background-color: aquamarine;

                color: #fff;

            }

            .nav .list-li a {

                display: block;

            }

            .nav li a:hover {

                color: #fff;

                background-color: blue;

            }

        </style>

    </head>

    <body>

        <ul class="nav">

            <li class="list-li">

                <a href="javascript:;">home</a>

                <ul>

                    <li>

                        <a>desgin1</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                </ul>

            </li>

            <li class="list-li">

                <a href="javascript:;">home</a>

                <ul>

                    <li>

                        <a>desgin2</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                </ul>

            </li>

            <li class="list-li">

                <a href="javascript:;">home</a>

                <ul>

                    <li>

                        <a>desgin3</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                </ul>

            </li>

            <li class="list-li">

                <a href="javascript:;">home</a>

                <ul class="ul-last">

                    <li>

                        <a>desgin4</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                    <li>

                        <a>desgin</a>

                    </li>

                </ul>

            </li>

        </ul>

    </body>

</html>

纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）的更多相关文章

  1. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  3. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  4. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  5. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  6. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  7. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  8. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  9. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

随机推荐

  1. python中的多进程与多线程(二）

    1.使用多线程可以有效利用CPU资源,线程享有相同的地址空间和内存,这些线程如果同时读写变量,导致互相干扰,就会产生并发问题,为了避免并发问题,绝不能让多个线程读取或写入相同的变量,因此python中 ...

  2. 尚硅谷springboot学习33-整合mybatis

    引入mybatis依赖(还要引入mysql和jdbc依赖) <dependency> <groupId>org.mybatis.spring.boot</groupId& ...

  3. 详解BOM用途分类及在汽车企业中的应用

    摘要:在整车企业中,信息系统的BOM是联系CAD.CAPP.PDM和ERP的纽带,按照用途划分产品要经过产品设计,工程设计.工艺制造设计.生产制造4个阶段,相应的在这4个过程中分别产生了名称十分相似但 ...

  4. Beta冲刺——第四天

    beat冲刺:第四天 各个成员今日完成的任务 成员 冯晓.马思远 彭辉.王爽 吴琼.郝延婷 今日完成任务 ·管理员功能模块的代码规范与测试 ·后台审稿系统代码规范 ·代码规范 ·系统审稿模块功能测试 ...

  5. OkHttp 同步异步操作

    OkHttp是一个Java和Android的HTTP和HTTP/2的客户端,负责发送HTTP请求以及接受HTTP响应. 一.使用OkHttp OkHttp发送请求后,可以通过同步或异步地方式获取响应. ...

  6. 教女朋友写第一个php

    1 首先 下载xampp 软件.按默认安装好之后 在电脑的右下角的箭头里能发现一个橘色的小图标 双击它 启动阿帕奇和mysql 会变绿 2 打开 C:\xampp\apache 文件夹 找到httpd ...

  7. javaMail实现收发邮件（二）

    JavaMail API常用类 JavaMail API使用javax.mail.Message类来表示一封邮件,Message类是一个抽象类,所以我们需要使用其子类javax.mail.intern ...

  8. dede织梦动态页面通过手机模板实现wap浏览

    https://jingyan.baidu.com/article/a948d6517be0eb0a2dcd2ebc.html

  9. Linux系统minicom命令详解

    minicom 功能说明:调制解调器通信程序 语 法:minicom [-8lmMostz][-a<on或0ff>][-c<on或off>][-C<取文件>][-d ...

  10. Yii2增删改查

    Controller <?php namespace frontend\controllers; use frontend\models\User; use yii\data\Paginatio ...