CSS 下拉菜单

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

1、下拉菜单的实现

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

    
    





    鼠标你过来，我为你展示下拉菜单。
    

        
下拉菜单 1
        
下拉菜单 2
    

　　实例解析：

　　HTML 部分：

　　　　可以使用任何 HTML 元素来打开下拉菜单，比如 45a2772a6b6107b401db3c9b82c049c2，或 3499910bf9dac5ae3c52d5ede7383485、bb9345e55eb71822850ff156dfde57c8 等元素。

　　　　然后，使用 e388a4556c0f65e1904146cc1a846bee 元素来创建一个容器，用于包含下拉菜单的内容，并自定义他需要出现的位置。

　　　　最后，再使用 e388a4556c0f65e1904146cc1a846bee 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

　　CSS 部分：

　　　　.dropdown 类使用 position:relative，这将设置下拉菜单的内容放置在下拉按钮（使用 position:absolute）的右下角位置。

　　　　.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移入指定元素后显示。

　　　　注意：在上面的例子中，下拉菜单容器的宽度设置为最小 200px，根据实际情况可以自行定义。

　　　　如果希望下拉菜单与下拉按钮的宽度一致，可将宽度设置为 100%，overflow:auto 属性可以指定在小尺寸屏幕上滚动。

　　　　:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单，将下拉菜单容器设置为 display:block;

2、创建下拉菜单

　　在上面例子的基础上，创建一个下拉菜单，并允许用户选取列表中的某一项目。

    
    





    下拉菜单按钮
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3
    

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

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

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

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

3、下拉菜单的对齐方式

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

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

    
    





    左
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3
    



    右
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3
    

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

4、下拉图片

　　下的例子，在下拉菜单中添加图片：

    
    





    
    

        
        
最美的时光，留给最美的风景！
    

　　在 Chrome 中当鼠标移入图片下拉按钮时显示如下：

5、导航栏下拉菜单

　　下面的例子，在导航栏菜单中添加下拉菜单：

    
    





    
在线商城
    
产品展示
    

        下拉菜单
        

            子菜单 1
            子菜单 2
            子菜单 3
        
    

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

相关文章：

CSS下拉菜单简单制作方法介绍

CSS 下拉菜单详解

简单带下划线跟随效果的CSS3下拉菜单特效