简单给大家介绍一下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. Tensor Core技术解析（上）

    Tensor Core技术解析(上) NVIDIA在SIGGRAPH 2018上正式发布了新一代GPU架构--Turing(图灵),黄仁勋称Turing架构是自2006年CUDA GPU发明以来最大的 ...

  2. Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

    近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...

  3. python+selenium_鼠标事件

    引言--在实际的web产品测试中,对于鼠标的操作,不单单只有click(),有时候还要用到右击.双击.拖动等操作,这些操作包含在ActionChains类中. 一.ActionChains类中鼠标操作 ...

  4. JMeter使用教程2——MySQL压测

    之前写过一篇JMeter使用教程,只是介绍了http请求的压力测试,想到MySQL的测试也挺必要的,于是写下这篇记录一下.如果不知道怎么下载和安装,可以看一下上一篇关于JMeter的文章,地址是:ht ...

  5. 编译原理-一种词法分析器LEX原理

    1.将所有单词的正规集用正规式描述 2.用正规式到NFA的转换算 得到识别所有单词用NFA 3.用NFA到DFA的转换算法 得到识别所有单词用DFA 4.将DFA的状态转换函数表示成二维数组 并与DF ...

  6. 像Swing这种已经不太用的技术，大学还在教，到底要不要学？

    一直以来,写日常问题.前沿技术和架构思考类的文章比较多,今天为什么突然来说说Swing这个陈年老技术呢? 因为在CSDN上看到了这样的一篇文章: 可以看到作者对于学Swing还是挺愤怒的,不过确实Sw ...

  7. JAVA 进行图片中文字识别（准确度高）！！！

    OCR 识别文字项目 该项目 可以进行两种方式进行身份证识别 1. 使用百度接口 1.1 application-dev.yml配置 ocr: # 使用baiduOcr 需要有Ocr服务器 使用百度需 ...

  8. Nebula 基于 ElasticSearch 的全文搜索引擎的文本搜索

    本文首发于 Nebula Graph 公众号 NebulaGraphCommunity,Follow 看大厂图数据库技术实践. 1 背景 Nebula 2.0 中已经支持了基于外部全文搜索引擎的文本查 ...

  9. v-for和v-if不能同时使用

    如果使用v-for遍历数据时,想筛选出URL不为空的项并进行渲染 <ul> <li v-for="(item,index) in list" v-if=" ...

  10. JVM面试题（史上最强、持续更新、吐血推荐）

    文章很长而且持续更新,建议收藏起来,慢慢读! 高并发 发烧友社群:疯狂创客圈(总入口) 奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : 极致经典 + 社群大片好评 < Java 高并发 三部 ...