要点:定位,隐藏,显示。

(一)先建一个两次列表

<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制作简单下拉菜单的更多相关文章

  1. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  4. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  5. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  6. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  7. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  8. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  9. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

随机推荐

  1. CC2530定时器1的模模式中断

    CC2530定时器1的模模式中断void timer1SInit(void){ T1CCTL0 = 0; T1CTL &= ~0x0F; //clear register T1CTL |= 0 ...

  2. hdu 2473 Junk-Mail Filter

    http://acm.hdu.edu.cn/showproblem.php?pid=2473 并查集设置虚拟父节点. #include <cstdio> #include <cstr ...

  3. HDU 4411 Arrest

    http://www.cnblogs.com/jianglangcaijin/archive/2012/09/24/2700509.html 思路: S->0 流量为K费用0 0->i 流 ...

  4. PowerShell3.0中,所有的命令

    Get-Command * >> cmd.txt CommandType Name ModuleName ----------- ---- ---------- Alias % -> ...

  5. centos 6.4 更新源地址

    执行如下命令: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.old vim /etc/yum.repo ...

  6. < welcome > 一起学习,进步,分享。

    现在时间:2014-3-24 hello world my blog. 第一次做博客,欢迎各路朋友指教.慢慢的分享学习到得东西,本人目前正在做IOS,也在学习数据库简单地应用. 作为一个IOS开发者, ...

  7. 格而知之16:我所理解的Block(2)

    11.那么Block到底是怎么实现的呢?试一试通过将Block 的代码转换成普通C语言代码来查看它的实现过程. 要将OC代码转换成C语言代码,可以使用clang编译的一个命令: 通过这个命令能把指定文 ...

  8. Gradle Tips#1-tasks

    原文链接 以这篇博客開始,我将写一系列关于Gradle的文章,用来记录接触Gradle构建脚本以来我所理解的Gradle. 今天要讲的就是Gradle tasks以及task的配置和运行.可能有的读者 ...

  9. storm源代码分析---Transactional spouts

    Transactionalspouts Trident是以小批量(batch)的形式在处理tuple.而且每一批都会分配一个唯一的transaction id.不同spout的特性不同,一个trans ...

  10. [Hapi.js] View engines

    View engines, or template engines, allow you to maintain a clean separation between your presentatio ...