用css写出下拉框(代码转自wq群)

时间:2022-07-20 22:46:05

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

<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之实现下拉框自上而下展开动画效果&amp&semi;&amp&semi;自下而上收起动画效果

    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&period;net html 单击按钮弹出下拉框效果

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

随机推荐

  1. 耗电—Android

    Android应用耗电分析与优化 http://sanwen8.cn/p/297Ut7b.html http://www.cnblogs.com/kobe8/p/3819305.html 有效控制An ...

  2. Bootstrap&lowbar;面板

    一.基础面板 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块. 由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“pan ...

  3. base64coder调用

    base64coder 可以查看官网:   http://www.source-code.biz/base64coder/java/ 我所涉及到的  base64coder调用: 某天,因需要修改Pr ...

  4. 20140717 随笔 技术文章安家至CSDN

    今天意外的看到了阳光小强的博客,接着在CSDN里看着各种博客,又有一种冲动,想在CSDN里安家.我是一个不安分的人,或者说是不能坚持的人,喜新厌旧属于我吧.看到新鲜的就要去试一下,但是能够坚持下来的却 ...

  5. 【Chromium中文文档】Chromium如何展示网页

    Chromium如何展示网页 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//Start_Here_Backgrou ...

  6. JMeter-接口自动化之正则表达式关联

    jmeter中,接口自动化的关键在于参数关联.比如需要登录的接口,如何调用登录口令?一个增删改查的闭环,如何将接口参数上下传递?下面就以实际的例子来仔细说一说 1:登录接口 这里有一个实际的登录接口, ...

  7. 常用linux日志查询命令

    1.查看实时日志: tail -f nohup.out 2.分页查看所有日志: cat nohup.out | more 4.分页查看前N行日志: tail -n 1000 nohup.out | m ...

  8. EXISTS的使用详解

    .exists的使用场合: exists 用于只能用于子查询,可以替代in,若匹配到结果,则退出内部 查询,并将条件标志为true,传回全部结果资料,in 不管匹配到匹配不到都 全部匹配完毕,使用ex ...

  9. &lbrack;转&rsqb;ConcurrentHashMap原理分析

    一.背景: 线程不安全的HashMap     因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap. 效率低下的Has ...

  10. 【mysql】连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

    1. 增加 MySQL 的 wait_timeout 属性的值.  修改 /etc/mysql/my.cnf文件,在 [mysqld] 节中设置: # Set a connection to wait ...