怎样用css写出一个下拉菜单
<style>
2 /* css*/
3 #body{
4 float: left;
5 }
6 #xialakuang{
7 background-color:#f9f9f9;
8 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
9 display: none;
10 }
11 #body a{
12 display: block;
13 padding:10px 15px;
14 color: #C4C4C4;
15 line-height: 20px;
16 font-size: 12px;
17 }
18 #body a:link{
19 text-decoration: none;
20 background-color: black;
21 }
22 #body a:hover{
23 background-color:#3E3D3D;
24 color: white;
25 }33 .anniu{
34 background-color: black;
35 width: 108px;
36 height: 40px;
37 color: white;
38 border: none;
39 cursor: pointer;
40 }
41 #body:hover #xialakuang{
42 display: block; /*鼠标放在div上时使下拉框显示，放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
43 }
44 #body:hover .anniu{
45 background-color:#3E3D3D;
46 }
47 </style>
48 <body>
49 <div id="body">
50 <button class="anniu">移动下拉(css)</button>
51 <div id="xialakuang">
52 <a href="">菜单</a>
53 <a href="">菜单</a>
54 <a href="">菜单</a>
55 <a href="">菜单</a>
56 <a href="">菜单</a>
57 <a href="">菜单</a>
58 </div>
59 </div>
60 </body>
怎样用css写出一个下拉菜单的更多相关文章
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- 一个用css写出来的下拉菜单
1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
- swift 第九课 用tableview 做一个下拉菜单Menu
写到这里的时候,自己这个项目已经完成了一半左右,项目进度自己还是挺满意.今天又有一个新的布局,要实现个下拉菜单,刚开始写的时候,觉得会很容易,后来发现也是小错不断, 我想自己限制的自己属于写博客的初期 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...
随机推荐
- linux下编译visp库
#下载源码git clone "https://github.com/lagadic/visp.git"#work目录mkdir work#build目录mkdir build#c ...
- [HNOI2007]神奇游乐园（插头DP）
题意:n*m的矩阵内值有正有负,找一个四连通的简单环(长度>=4),使得环上值的和最大. 题解:看到2<=m<=6和简单环,很容易想到插头DP,设f[i][j][k]表示轮廓线为第i ...
- (N叉树 递归) leetcode589. N-ary Tree Preorder Traversal
Given an n-ary tree, return the preorder traversal of its nodes' values. For example, given a 3-ary ...
- 深入了解SQL的四种连接&不然要命的！
1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...
- Java基础--面向对象编程1（类与对象）
1.类(class)的定义 类是对一组具有相同特征和行为的对象的抽象描述. 在程序中,引入类的概念,就是为了快速生成更多的具有相同特性和行为的事物. 2.对象(object)的定义 对象是类的具体实现 ...
- 老男孩Python全栈学习 S9 日常作业 009
1.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func1(List): List2 = [] for num in range(len(Li ...
- Python包中 __init__.py文件的作用
原创连接 https://www.cnblogs.com/AlwinXu/p/5598543.html Python包中 __init__.py文件的作用 在创建python包的过程中,IDE都会在包 ...
- Kafka（一）简介
1.Kafka简介 Kafka已经被很多公司广泛应用,一款实时流式消息组件.发送消息端称为Producer,接收端称为Consumer,Kafka集群有多个kafka实例组成,每个实例称为broker ...
- 查看变更（git diff）
git diff命令 如果想要知道变更的具体内容,可以使用git diff命令.它被用来解决两个问题: 哪些变更还没有被暂存? 那些已暂存的变更正待提价? git diff在git status基础上 ...
- CentOS命令登录MySQL时，报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解决方法
1.停用mysql服务:# /etc/rc.d/init.d/mysqld stop 2.输入命令:# mysqld_safe --user=mysql --skip-grant-tables --s ...