CSS技巧分享：如何用css制作横排二级下拉菜单

工具/材料

notepad++

浏览器

操作方法

打开Notepad++，先输入个页面框架

<！DOCTYPE html>

框架好了，那么就该定义页面的title，关键词keyword，和描述description

这些内容只能在中完成。

定义页面使用的css样式，也是需要在里定义的。

添加一个DIV标签，在页面中划分出一个块来，用来显示。

div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述

然后使用无序标签

+样式
• 来实现模块。

  • 搜狗略懂

    • 搜狗问问
    • 搜狗输入法
    • 搜狗浏览器
    • 搜狐

  放上全部的代码吧，可以参考一下啊，

  //允许你通过一个网址来识别你的标记

  • 搜狗略懂

    • 搜狗问问
    • 搜狗输入法
    • 搜狗浏览器
    • 搜狐

  如果要添加更多的菜单，只需要后边继续添加

  /
  • 即可

    特别提示

    写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？

    下拉菜单栏中的三条线用css怎么写

    纯用CSS做的下拉菜单，真的很简单。【211】

    • 我们先看一下最终效果。

    

    图1

    一、开始吧，我们先做一个盒子drop，它以后要装的是按钮和下拉列表。

    

    图2

    二、在盒子drop里面做一个按钮dropbt。

    

    图3

    

    图4

    三、按钮有点丑了，于是我们给按钮加点样式。

    

    图5

    

    图6

    四、下面我们做出下拉列表，它们是一串链接，我们用一个盒子dropbox装着。

    

    图7

    

    图8

    五、列表是横着的，而且不怎么好看，我们先改超链接a的样式。

    

    图9

    

    图10

    六、菜单列表好看许多了，我们给列表盒子dropbox加点样式，比如阴影。

    

    图11

    

    图12

    七、再好看的菜单列表一开始也是要先隐藏的。

    

    图13

    

    图14

    八、我们让鼠标移到按钮上时，按钮颜色变浅。

    

    图15

    

    图16

    九、现在可以设置点击后，下拉菜单出现了。

    

    图17

    

    图18

    十、下拉菜单出现了，但你会发现鼠标在右侧时，菜单也会弹出来，我们改一下样式，解决这个问题，再次移过去的时候，你会发现只有在按钮位置才会弹出菜单了。

    

    图19

    十一、完善一下，当鼠标移动菜单列表时，背景色改变。

    

    图20

    

    图21

    ---

    点我下拉菜单

    是下拉菜单一 是下拉菜单二 是下拉菜单三