css制作简单下拉菜单
要点:定位,隐藏,显示。
(一)先建一个两次列表
<ul id="ul1">
<li>首页</li>
<li>第二页
<ul>
<li><a href='#'>one</a></li>
<li><a href='#'>two</a></li>
<li><a href='#'>three</a></li>
</ul>
</li>
<li>第三页</li>
</ul>
(二)在css中设置样式:显示列表项的边框,设置宽和高,为了好看,再设置一张背景图片。
li{
border:1px solid gray;
width: 80px;
height: 35px;
background-image: url(a1.png);
}
非常难看。
(三)去掉圆点.
li{list-style-type: none;}
(四)让首级列表项水平浮动
#ul1>li{float: left;} “>” 指的是只包含ul1列表下的li元素,不包括子元素里的下一级li元素。
(五)将二级菜单重新定位,和第二页对齐
#ul1 ul{position:absolute;
top: 52px;
left: 90px; }
(六)将二级菜单隐藏
#ul1 ul{display:none}
(七)当鼠标划过相应菜单时,二级菜单显赤
#ul1 li:hover ul {display:block;}
(八)为了好看,可设置鼠标划过颜色。
#ul1 li:hover {background:gray;
cursor:pointer;}
还可以设置文体居中对齐,去除链接下划线等
最终的代码如下:
<style>
li{
border:1px solid gray;
width: 80px;
height: 35px;
background-image: url(a1.png);
list-style-type: none;
text-align: center;
padding-top: 8px;
}
#ul1>li{float: left;}
#ul1 ul{position:absolute;
top: 60px;
left: 90px;
display: none;
}
#ul1 li:hover ul {display:block;}
#ul1 li:hover {background:gray;
cursor:pointer;}
a{text-decoration: none;}
</style>
css制作简单下拉菜单的更多相关文章
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- Excel应用----制作二级下拉菜单【转】
应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
随机推荐
- un ange frappe a ma porte
Un signe, une larme 魂牵 泪扰 un mot, une arme 字断 情烧 nettoyer les étoiles à l'alcool de mon ame 灵魂之酒眷洗 星 ...
- linux源码安装nodejs
如何在linux上安装nodejs环境 到网下载安装文件node-v5.10.1-linux-x64.tar.gz. 将源码包上传到linux的/usr/local/node/目录下,在该目录下解 ...
- [TYVJ] P1003 越野跑
越野跑 背景 Background 成成第一次模拟赛 第二道 描述 Description 为了能在下一次跑步比赛中有好的发挥,贝茜在一条山路上开始了她的训练.贝茜希望能在每次训练中跑 ...
- 163k地方门户网站系统js小Bug
163k地方门户网站系统后台在Firefox下无法通过选择区域来获取相对应的地段,IE浏览器下无些问题. Firebug提示错误为: ReferenceError: requestdataquyu i ...
- hasOwnProperty方法的使用
JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName)其中参数obj ...
- The Contiki build system 编译系统
The Contiki build system======================== The Contiki build system is designed to make it eas ...
- ubuntu 执行apt-get update 提示无法获得锁
问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...
- C51变量的存储
一.全局变量和局部变量 全局变量和局部变量的区别在于作用域的不同.此外还有静态全局变量和静态局部变量. 全局变量作用域为全局,在一个源文件中定义,其他的源文件也可以应用.在其他的源文件中使用exter ...
- JS的substr与substring的区别
substr返回从指定位置开始的指定长度的子字符串 str.substr(star[,length]) 第二个参数可选,不选的话,截取到最后,如果length为0或者负数,那么返回的将是一个空字符串 ...
- 单链表之C++实现
在实现单链表时要注意对单链表的逻辑存储.物理存储有清晰的概念. 如上图链表已经完成,其逻辑结构如上.当需要对其进行操作,比如插入.删除,通常需要引 入指针,如上的ptr1.ptr2.在编程时一定要注意 ...