简单给大家介绍一下CSS普通菜单制作，先看图

功能很简单

  • UL制作菜单
  • 鼠标进入LI的CSS伪类，实现菜单弹出效果

源码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul {

                list-style: none;

            }

            .nav > li {

                float: left;

            }

            a {

                text-decoration: none;

                background: #D2691E;

                color: #FFFFFF;

                display: block;

                height: 28px;

                line-height: 28px;

                padding: 0 18px;

            }

            .nav > li:first-child a {

                border-radius: 5px 0px 0px 5px;

            }

            .nav > li:last-child a {

                border-radius: 0px 5px 5px 0px;

            }

            .menu {

                padding: 0;

                display: none;

            }

            .menu > li:last-child a {

                border-radius: 0px 0px 5px 5px;

            }

            .menu > li:hover a {

                background-color: #FF910C;

            }

            .nav > li:hover > .menu {

                display: block;

            }

        </style>

    </head>

    <body>

        <ul class="nav">

            <li><a href="#">下拉菜单</a></li>

            <li>

                <a href="#">下拉菜单</a>

                <ul class="menu">

                    <li><a href="#">子菜单-1</a></li>

                    <li><a href="#">子菜单-2</a></li>

                    <li><a href="#">子菜单-2</a></li>

                </ul>

            </li>

            <li><a href="#">下拉菜单</a></li>

            <li><a href="#">下拉菜单</a></li>

        </ul>

    </body>

</html>

[刘阳Java]_CSS普通菜单制作的更多相关文章

  1. [刘阳Java]_CSS菜单侧边栏制作

    再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. [刘阳Java]_CSS鼠标悬停

    小白在学习前端技术时候,一定会在刚开始的时候学习CSS2和CSS3的相关知识.这篇内容给大家介绍一个CSS鼠标悬停的效果.大家可以先看下面的效果图,然后我们在说一下实现的效果要求吧 上图效果非常简单和 ...

  3. [刘阳Java]_CSS图片画廊

    图片画廊也是一种比较经典的案例.本节文章主要简单给大家介绍了CSS2实现图片画廊,采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 ...

  4. [刘阳Java]_CSS数字分页效果

    先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...

  5. [刘阳Java]_酷炫视频播放器制作_JS篇

    此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...

  6. [刘阳Java]_酷炫视频播放器制作_界面篇

    今天开始分享一篇酷炫播放器制作,包括界面+JS.整个案例非常类似腾讯视频,优酷视频,爱奇艺视频.我们先看一下效果图,然后这篇文章主要界面篇 是不是效果比较酷炫,那么我接着来给大家说一下这个界面设计思路 ...

  7. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  8. [刘阳Java]_什么是EasyUI_第1讲

    jQuery EasyUI在Java后台开发中用得还是比较多.当然客观来讲虽然前端技术的发展,很多后台界面设计都植入了前端技术的框架.但是这篇文章我个人觉得也不会妨碍我们对jQuery EasyUI的 ...

  9. [刘阳Java]_MyBatis_动态SQL标签用法_第7讲

    1.MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. 2.MyBatis中用于实现动态SQL的元素主要有 if choose(when,otherwi ...

随机推荐

  1. C/C++语言编程的隐患！

    C/C++语言编程的隐患! 本文将带您了解一些良好的和内存相关的编码实践,以将内存错误保持在控制范围内.内存错误是 C 和 C++ 编程的祸根:它们很普遍,认识其严重性已有二十多年,但始终没有彻底解决 ...

  2. 使用Nginx配置服务静态文件(图片,文本,视频等)

    安装Nginx 安装Nginx较为简单,请参考下方链接或自行百度. 参考链接:https://blog.csdn.net/qq_26666947/article/details/112272058 以 ...

  3. C#-防止用户输入具有风险的敏感字符

    最近有涉及到要防止用户在网页文本框中输入具有风险的敏感字符所以特地编写了一套针对用户输入的字符进行安全过滤的一个方法,在后台接收到用户输入的字符后调用执行该方法即可完成过滤操作,主要使用正则来匹配并替 ...

  4. 重新整理 mysql 基础篇————— 介绍mysql日志[二]

    前言 对于后端开发来说,打交道最多的应该是数据库了,因为你总得把东西存起来. 或是mongodb或者redis又或是mysql.然后你发现一个问题,就是他们都有日志系统,那么这些日志用来干什么的呢? ...

  5. Java接口以及匿名内部类，静态代码块

    接口 接口中只能定义public并且是final的公共静态常量,不允许定义变量. 抽象类可以定义抽象方法和非抽象方法,接口中只能定义公共的,抽象的实例方法. 接口只能由其他接口实现继承 子接口继承的目 ...

  6. C#中使用ffmpeg合并视频

    首先将最新的ffmpeg.exe放到debug路径下,下载地址 http://www.ffmpeg.org/download.html 然后调用此方法 public void CombineMp4Wi ...

  7. JNI相关笔记 [TOC]

    JNI相关笔记 目录 JNI相关笔记 1 生成native code所需要的头文件 2 JNI提供的一些函数和方法 3 局部引用,全局引用,全局弱引用. 4 异常 1 生成native code所需要 ...

  8. 我是如何用 ThreadLocal 虐面试官的？

    我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. Thr ...

  9. 单元测试布道二：在全新的 DDD 架构上进行单元测试

    目录 回顾 dotnet 单元测试相关的工具和知识 可测试性 不确定性/未决行为 依赖于实现:不可 mock 复杂继承/高耦合代码:测试困难 实战:在全新的 DDD 架构上进行单元测试 需求-迭代1: ...

  10. Pytest学习笔记7-skip和skipif的使用

    前言 在实际的测试中,我们经常会遇到需要跳过某些测试用例的情况,pytest提供了skip和ifskip来跳过测试 下面我们就来通过一些例子看看skip和ifskip具体如何使用吧 skip的用法 使 ...