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:这是一个横向下拉的菜 ...
随机推荐
- CC2530定时器1的模模式中断
CC2530定时器1的模模式中断void timer1SInit(void){ T1CCTL0 = 0; T1CTL &= ~0x0F; //clear register T1CTL |= 0 ...
- hdu 2473 Junk-Mail Filter
http://acm.hdu.edu.cn/showproblem.php?pid=2473 并查集设置虚拟父节点. #include <cstdio> #include <cstr ...
- HDU 4411 Arrest
http://www.cnblogs.com/jianglangcaijin/archive/2012/09/24/2700509.html 思路: S->0 流量为K费用0 0->i 流 ...
- PowerShell3.0中,所有的命令
Get-Command * >> cmd.txt CommandType Name ModuleName ----------- ---- ---------- Alias % -> ...
- centos 6.4 更新源地址
执行如下命令: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.old vim /etc/yum.repo ...
- < welcome > 一起学习,进步,分享。
现在时间:2014-3-24 hello world my blog. 第一次做博客,欢迎各路朋友指教.慢慢的分享学习到得东西,本人目前正在做IOS,也在学习数据库简单地应用. 作为一个IOS开发者, ...
- 格而知之16:我所理解的Block(2)
11.那么Block到底是怎么实现的呢?试一试通过将Block 的代码转换成普通C语言代码来查看它的实现过程. 要将OC代码转换成C语言代码,可以使用clang编译的一个命令: 通过这个命令能把指定文 ...
- Gradle Tips#1-tasks
原文链接 以这篇博客開始,我将写一系列关于Gradle的文章,用来记录接触Gradle构建脚本以来我所理解的Gradle. 今天要讲的就是Gradle tasks以及task的配置和运行.可能有的读者 ...
- storm源代码分析---Transactional spouts
Transactionalspouts Trident是以小批量(batch)的形式在处理tuple.而且每一批都会分配一个唯一的transaction id.不同spout的特性不同,一个trans ...
- [Hapi.js] View engines
View engines, or template engines, allow you to maintain a clean separation between your presentatio ...