做网易云音乐首页时遇到的问题，鼠标指在右上角头像时出现下拉框。

<style>
/* css*/
#body{
float: left;
}
#xialakuang{
background-color:#f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
display: none;
}
#body a{
display: block;
padding:10px 15px;
color: #C4C4C4;
line-height: 20px;
font-size: 12px;
}
#body a:link{
text-decoration: none;
background-color: black;
}
#body a:hover{
background-color:#3E3D3D;
color: white;
}33 .anniu{
background-color: black;
width: 108px;
height: 40px;
color: white;
border: none;
cursor: pointer;
}
#body:hover #xialakuang{
display: block; /*鼠标放在div上时使下拉框显示，放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
}
#body:hover .anniu{
background-color:#3E3D3D;
}
</style>
<body>
<div id="body">
<button class="anniu">移动下拉(css)</button>
<div id="xialakuang">
<a href="">我的主页</a>
<a href="">我的消息</a>
<a href="">我的等级</a>
<a href="">会员中心</a>
<a href="">个人设置</a>
<a href="">退出</a>
</div>
</div>
</body>

用css写出下拉框（代码转自wq群）的更多相关文章

  1. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

  2. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  3. easyui combobox点击输入框弹出下拉框

    由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...

  4. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  5. CSS实现鼠标移入弹出下拉框

    前言 最近比较沉迷CSS,所以我现在来做个鼠标的交互效果 HTML <ul> <li>测试</li> <li>测试</li> <li ...

  6. Excel制作多选下拉框代码以及图示

    1.首先  点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...

  7. 纯css实现select下拉框并排显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQuery autocomplete获得焦点触发弹出下拉框

    需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...

  9. asp.net html 单击按钮弹出下拉框效果

    1.说明 需要引用jquery.js文件,我的页面是在asp.net MVC4 添加的web窗体,其他不多说 直接看代码 2.代码 <%@ Page Language="C#" ...

随机推荐

  1. linq 动态判断

    以前要不是使用扩展方法 要么使用如(t==2&&判断条件)||(s==1&&判断条件) 其实可以简单的实现扩展一个whereIf即可(abp实现),如下所示 ··· / ...

  2. Angular5学习札记

    1.使用cnpm安装jQuery和bootstrap后,页面没有加载的问题 -使用cnpm安装的路径和使用npm安装路径不一样,解决如下: 把css路径改成"../node_modules/ ...

  3. 1.git使用入门之基本的更新提交操作

    在项目开发中使用git的规范,避免因为不规范的操作带来额外的工作量 更行代码 git pull 提交代码 .查看状态 git status .添加到本地缓存 git add .(所有,也可以单个添加) ...

  4. laravel框架数据迁移

    迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和Laravel 的 schema 构建器结对从而可以很容易地构建应用的数据库表结构.如果你曾经告知小组成员需要手动添 ...

  5. Kali xrdp远程桌面

    发现论坛没有该教程,在这里分享给需要的基友.源还是要更新的,楼主在网上百度的kali源,而不是linux源,比163.搜狐的源好些.首先安装xrdp: apt-get install xrdp 复制代 ...

  6. fedora 安装gdal

    hese steps worked for me on a Fedora system: 1.) download the 3 files related to oracle instant clie ...

  7. 如何搭建http服务仓库

    1.拷贝仓库repo-A文件到服务器/media/D: 2.通过createrepo_c 生成仓库rpm信息数据 cd repo-A createrepo . 3.chmod -R 775  repo ...

  8. win8+iis8+PHP5安装配置和Zend Optimizer安装教程

    安装 Zend Optimizer       下载地址:http://www.onlinedown.net/soft/32228.htm 下载直接双击安装即可,安装过程要你选择 Web Server ...

  9. 7-性能测试i报告

    性能测试报告概述 1.测试报告是指把测试的过程和结果写成文档:对发现的问题和缺陷进行分析:为纠正软件的存在的质量问题提供依据: 为软件验收和交付打下基础 2.性能测试报告属于软件测试报告的一种,主要针 ...

  10. 【转】Linq表达式、Lambda表达式你更喜欢哪个？

    [转]Linq表达式.Lambda表达式你更喜欢哪个? 什么是Linq表达式?什么是Lambda表达式? 如图: 由此可见Linq表达式和Lambda表达式并没有什么可比性. 那与Lambda表达式相 ...