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

<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. 认识Thymeleaf：简单表达式和标签 基础信息

    转载:https://www.cnblogs.com/beyrl-blog/p/6633182.html 本文只适用于不会Java对HTML语言有基础的程序员们,是浏览了各大博客后收集整理,重新编辑的 ...

  2. PHP swoole process的使用

    引入背景:假如我们每天有10000个订单生成,需要同步到仓储系统中去,以前做法是开启一个crontab去跑这些任务,但是发现总有感觉同步效率低,间隔时间都是分钟级别的. 解决方案测试:我们将同步订单的 ...

  3. TCP窗口扩大选项

    TCP窗口扩大选项(TCP Window Scale Option) TCP窗口扩大选项 TCP Window Scale Option (WSopt) 窗口扩大选项用于扩大TCP通告窗口,使TCP的 ...

  4. dbc file

    DBC文件是用来描述CAN网络通信信号的一种格式文件.它可以用来监测与分析CAN网络上的报文数据,也可以用来模拟某个CAN节点.(DBC file is a format file used to d ...

  5. HTML的基本知识点

    <!DOCTYPE HTML> <html> <body> <video width="320" height="240&quo ...

  6. Netty 源码 Channel（二）核心类

    Netty 源码 Channel(二)核心类 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.Channel 类图 二. ...

  7. java 23种设计模式学习。

    一.3大类设计模式:创建型,结构型,行为型. a.5种创建型模式:工厂方法,抽象工厂,单例,建造者,原型. b.7种结构型模式:适配器,装饰器,代理,外观,桥接,组合,享元. c.11种行为型模式:策 ...

  8. RecyclerView错误

    1. java.lang.NoClassDefFoundError: android.support.v7.widget.RecyclerView 这个错误真TM见鬼,明明jar包里面就有这个类,工程 ...

  9. linux-ubuntu 下Ｒ无法安装rjava模块的原因及解决方案

    错误信息: 没有 /usr/lib/jvm/default-java/jre/bin/java 原因: R找不到java作为依赖 解决方案: (1) 如果你没有安装java,请先安装java． (2) ...

  10. dfs序理解-hdu3887

    dfs序就是相当于把树转化成了一个区间,在区间上进行操作. void dfs(int u, int fa) { l[u]=++key; ; i=e[i].next) { int v=e[i].v; i ...