<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

*{

margin:0;

padding:0;}

ul{

list-style-type:none;

}

.ul li{

width:100px;

float:left;

height:30px;

margin-left:10px;

}

.ul .li{

background:#9C6;

}

.ul2{

width:100px;

height:100px;

background:#F69;

display:none;

}

.li:hover .ul2{

display:block;

margin-left:-10px;

}

</style>

<body>

<ul class="ul">

<li class="li"><a href="" class="a">我的订单</a>

<ul class="ul2">

<li><a href="">新浪微博</a></li>

<li><a href="">腾讯微博</a></li>

<li><a href="">新浪客服微博</a></li>

</ul> 

</li>

<li><a href="">我的评价</a></li>

<li><a href="">我的资产</a></li>

<li><a href="">我的积分</a></li>

<li><a href="">我的评价</a></li>

<li><a href="">账号设置</a></li>

<li><a href="">账户余额</a></li>

<li><a href="">代金卷</a></li>

<li><a href="">消息中心</a></li>

</ul>

</body>

</html>

主要：将要存放的下拉列表放在一个列标签中：先用display：none 进行隐藏

　　在hover;中用display：block显示

（2）

<!DOCTYPE HTML>

<html>

<head>

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

<title>利用float制作兼容ie6纯css下来菜单</title>

<style type="text/css">

* { margin:0; padding:0; }

ul { list-style:none; }

a:hover {color:#555; }

.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }

.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }

.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }

.nav a:hover { margin-right:1px; background:#3cf; }

.nav dd ul { float:left; font-size:0; z-index:888; }

.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }

.nav dd li a:hover { margin-right:1px; }

</style>

</head>

<body>

<dl class="nav">

<dd><a href="">首页</a></dd>

<dd>

<a href="">关于我们</a>

<ul>

<li><a href="">公司简介</a></li>

<li><a href="">公司文化</a></li>

<li><a href="">企业荣誉</a></li>

<li><a href="">联系我们</a></li>

</ul>

</dd>

<dd>

<a href="">新闻动态</a>

<ul>

<li><a href="">国内新闻</a></li>

<li><a href="">国外新闻</a></li>

</ul>

</dd>

<dd>

<a href="">产品展示</a>

<ul>

<li><a href="">111</a></li>

<li><a href="">222</a></li>

</ul>

</dd>

</dl>

</body>

</html>

　　

用css怎么制作下拉列表的更多相关文章

  1. 利用css+js制作下拉列表

    利用文本框来制作,可以不影响给后台传数据.<!DOCTYPE html> <html> <head> <style> *{;;;} body{font- ...

  2. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  3. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  4. css如何制作八边形

    随着技术的发展,css也越发强大,css可以制作很多有趣的图形,让我们一起来看一下如何使用css制作一个八边形吧.   方法/步骤     1新建一个html文件.如图:   在html文件上创建一个 ...

  5. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  6. css之制作三角形

    箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...

  7. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  8. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  9. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

随机推荐

  1. HDU2544-最短路(最短路模版题目)

    Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...

  2. javaWEB总结(5):GET与POST请求

    前言:get和post请求无论在项目中还是在面试中都会经常遇到,这次主要写一个小页面测试一下他们的区别,本人知识有限理解和说的简陋就全当给自己留个备份,日后再补充. 1.项目的目录结构 2.web.x ...

  3. android:layout_weight属性的使用方法总结

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6282826.html android:layout_weight属性可以和其他属性配合使用,产生多 ...

  4. hdu_3294_Girls' research(Manacher)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3294 题意:给你一个字符和一个字符串,第一个字符表示该字符代表a,然后让你求变换后的最长回文区间并输出 ...

  5. divide an integer into X parts (as even as possible)

    the algorithm is like this: it evenly spreads an integer N over K cells. for i = 0 to K array[i] = N ...

  6. sublime Text 常用操作

    原文出处:http://www.php100.com/html/it/focus/2014/1030/7666.html 1. 多光标操作:只要按下Cmd(Windows系统下Ctrl)键,再用鼠标选 ...

  7. MySQL启动相关知识

    使用mysqld和mysqld_safe启动的区别 直接运行mysqld程序来启动MySQL服务的方法很少见,mysqld_safe脚本[注意:mysqld_safe只是一个脚本]会在启动MySQL服 ...

  8. myeclipse 之 快捷键

    简单记录一下,新装了个机器,win7系统,想设置一下自己习惯的快捷键 如:ctrl+alt+方向键,复制行,发现设置不上,原先的自带的也失效,设置一下ctrl+alt+其它键,ok可以使用,这说明某些 ...

  9. mvc动态生成a标签，多个属性，多个querystring

    1*服务端 客户端 跳转的url 2*服务端 客户端 跳转的url 3*服务端 客户端  跳转的url  4*服务端 客户端 跳转的url

  10. HTML day01基础总结

    1.网页的基本元素 文字.图像与超链接. 2.每一个网页元素通常由开始标记.结束标记,以及在这两个标记中的内容所组成. 3.一般结构 <html> <head> <met ...