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:这是一个横向下拉的菜 ...
随机推荐
- NAS4Free 安装配置(五)配置SMB
配置SMB 现在我们有2块存储设备,一块做下载盘,一块做数据盘 为了便于管理和扩展,我们分别在两块盘上建文件夹和Dataset 对于download盘,因为是UFS,所以只能建文件夹 我们把整个盘共享 ...
- Hibernate整合Struts2时报错
今天在整合Hibernate和Struts2的时候遇到一个问题 总是出现各种异常,经过仔细检查,代码本身并没有问题, ----------------------------------------- ...
- iOS中3种正则表达式的使用与比较-备
1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email = @“nijino_saki@163.com”: NSString *regex ...
- CI练手下,找找感觉
从军哥谈CI框架上看了点点. controller: <?php class Jayjun extends CI_Controller { public function __construct ...
- fatal error LNK1112: module machine type 'x64' conflicts with target machine type 'X86'
这个问题很奇怪.原来是/machine:X86 /machine:X64这两个链接器选项一起使用了.所以就冲突了.接手别人的项目就是晕啊.不知道为什么在VS中linker commandline的ad ...
- python 程序穩定性閒談-續集
前文再續,書接上一回.上次總結python錯誤碼返回與異常機制共用的一些原則,毫無疑問地,仍會出現程序不穩定的現象(好吧,可能是我個人能力問題).在公司做的一個項目中,出現了因爲使用外部模塊造成pyt ...
- FlexComboBoxTree
在我的CSDN资源中有项目工程文件.下载导入工程即可看到效果,下面是地址. http://download.csdn.net/detail/cym_lmy/6326053 MyCombBoxTree1 ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- thinkphp实现excel数据的导入导出
下载地址:phpexcel.rar 实现步骤: 一:在http://phpexcel.codeplex.com/下载最新PHPExcel放到Vendor下,注意位置:ThinkPHP\Extend\V ...
- php利用pdo进行mysql的事务处理机制
想进行php的事务处理有下面几个步骤 1.关闭自动提交 2.开启事务处理 3.有异常就自动抛出异常提示再回滚 4.开启自动提交 下面是一个小示例利用pdo进行的php mysql事务处理,注意mysq ...