CSS下拉菜单效果代码分享

本篇内容主要讲解“CSS下拉菜单效果代码分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS下拉菜单效果代码分享”吧!

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的龙华网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。

1、下拉菜单的实现

当鼠标移入指定元素时,显示下拉菜单。代码如下:

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.       

  5.     简单的下拉菜单  

  6.   

  7.   

  8.   

  9.   

  10.     鼠标你过来,我为你展示下拉菜单。  

  11.       

  12.         

    下拉菜单 1

      

  13.         

    下拉菜单 2

      

  14.     

  

  •   

  •   

  •   

  • 实例解析:

    HTML 部分:

    可以使用任何 HTML 元素来打开下拉菜单,比如 ,或   

  •       

  •         下拉菜单项 1  

  •         下拉菜单项 2  

  •         下拉菜单项 3  

  •     

  •   

  •   

  •   

  •   


  • 在 Chrome 中当鼠标移入下拉菜单按钮时显示如下:

    CSS下拉菜单效果代码分享

    在上面的例子中,下拉菜单的内容设置了 box-shadow 属性,这个属性主要用于添加阴影,这样下拉菜单看起来就像一个“卡片”一样。该属性指定下拉菜单在水平方向阴影为 0,垂直方向为 8 像素的阴影,模糊距离为 15 像素,阴影的尺寸为 0,并指定阴影的颜色为黑色,且透明度为 0.2。

    下拉菜单按钮使用了 cursor 属性,该属性主要用于指定鼠标光标的类型,即鼠标指针放在一个元素边界范围内时所用的光标形状。

    下表列出了该属性所有的值: 鼠标可移入对应的属性值,查看光标的形状。

    CSS下拉菜单效果代码分享

    3、下拉菜单的对齐方式

    如果下拉菜单设置了 float:left 样式,那么还需要设置 left:0,即从 left:0 处开始从左向右显示菜单内容,否则会超出浏览器左边窗口。

    如果下拉菜单设置了 float:right 样式,默认都是从左向右显示,菜单内容则会超出浏览器右边窗口,所以还需要设置 right:0,让下拉菜单内容从右向左。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.   

    4.       

    5.     下拉菜单对齐  

    6.   

    7.   

    8.   

    9.   

    10.     左  

    11.       

    12.         下拉菜单项 1  

    13.         下拉菜单项 2  

    14.         下拉菜单项 3  

    15.       

    16.   

    17.   

    18.   

    19.     右  

    20.       

    21.         下拉菜单项 1  

    22.         下拉菜单项 2  

    23.         下拉菜单项 3  

    24.       

    25.   

    26.   

    27.   

    28.   

    在 Chrome 中当鼠标移入右下拉按钮时显示如下:

    CSS下拉菜单效果代码分享

    到此,相信大家对“CSS下拉菜单效果代码分享”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    网页题目:CSS下拉菜单效果代码分享
    文章起源:http://scyanting.com/article/iiohsi.html

    其他资讯