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

(一)先建一个两次列表

<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. un ange frappe a ma porte

    Un signe, une larme 魂牵 泪扰 un mot, une arme 字断 情烧 nettoyer les étoiles à l'alcool de mon ame 灵魂之酒眷洗 星 ...

  2. linux源码安装nodejs

    如何在linux上安装nodejs环境 到网下载安装文件node-v5.10.1-linux-x64.tar.gz.   将源码包上传到linux的/usr/local/node/目录下,在该目录下解 ...

  3. [TYVJ] P1003 越野跑

    越野跑 背景 Background 成成第一次模拟赛 第二道     描述 Description     为了能在下一次跑步比赛中有好的发挥,贝茜在一条山路上开始了她的训练.贝茜希望能在每次训练中跑 ...

  4. 163k地方门户网站系统js小Bug

    163k地方门户网站系统后台在Firefox下无法通过选择区域来获取相对应的地段,IE浏览器下无些问题. Firebug提示错误为: ReferenceError: requestdataquyu i ...

  5. hasOwnProperty方法的使用

    JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName)其中参数obj ...

  6. The Contiki build system 编译系统

    The Contiki build system======================== The Contiki build system is designed to make it eas ...

  7. ubuntu 执行apt-get update 提示无法获得锁

    问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...

  8. C51变量的存储

    一.全局变量和局部变量 全局变量和局部变量的区别在于作用域的不同.此外还有静态全局变量和静态局部变量. 全局变量作用域为全局,在一个源文件中定义,其他的源文件也可以应用.在其他的源文件中使用exter ...

  9. JS的substr与substring的区别

    substr返回从指定位置开始的指定长度的子字符串 str.substr(star[,length])  第二个参数可选,不选的话,截取到最后,如果length为0或者负数,那么返回的将是一个空字符串 ...

  10. 单链表之C++实现

    在实现单链表时要注意对单链表的逻辑存储.物理存储有清晰的概念. 如上图链表已经完成,其逻辑结构如上.当需要对其进行操作,比如插入.删除,通常需要引 入指针,如上的ptr1.ptr2.在编程时一定要注意 ...