用css怎么制作下拉列表
<!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怎么制作下拉列表的更多相关文章
- 利用css+js制作下拉列表
利用文本框来制作,可以不影响给后台传数据.<!DOCTYPE html> <html> <head> <style> *{;;;} body{font- ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- css如何制作八边形
随着技术的发展,css也越发强大,css可以制作很多有趣的图形,让我们一起来看一下如何使用css制作一个八边形吧. 方法/步骤 1新建一个html文件.如图: 在html文件上创建一个 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- css之制作三角形
箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
随机推荐
- keybd_event 对应表
Option Explicit Private Declare Sub keybd_event Lib "user32" (ByVal bVk As Byte, ByVal bSc ...
- cmd 下登陆ftp及相关操作
cmd 下登陆ftp及相关操作 2011-08-09 20:34:28| 分类: 小技巧|字号 订阅 一.举例 假设FTP地址为“ 61.129.83.39”(大家试验的时候不要以这个FTP去试,应 ...
- C# WebBrowser函数互相调用
在使用C#开发winform程序过程中,我们经常会碰到嵌入了一个WebBrowser的浏览器控件.很多时候,我们需要在程序里控制网页的显示方式,或者调用网页当中的某个JS函数,反过来,也有可能网页也需 ...
- servlet第2讲(下集)----创建servlet实例（继承HttpServlet）
- 在Service服务中请求网络
一.startservice方式启动 第一次startservice启动服务的时候,会走oncreate和onstart方法, 第二次startservice启动服务的时候,会走onstart方法, ...
- ASP.NET 会话状态的模式
ASP.NET 会话状态为会话数据提供了几个不同的存储选项.每个选项都通过一个 SessionStateMode 枚举值进行识别.如下列表中描述了可用的会话状态模式: InProc 模式:把会话状态存 ...
- Snackbar使用及其注意事项(转)
http://blog.csdn.net/jywangkeep_/article/details/46405301 Snackbar使用及其注意事项 引言 Snackbar是Android Suppo ...
- Openlayers 3 热力图
<body> <div id="map"></div> <script> var map = new ol.Map({ //初始化m ...
- Outing
Outing 题目描述 Organising a group trip for the elderly can be a daunting task... Not least because of t ...
- dedecms 标签的基本用法
1.关键描述调用标签: <meta name="keywords" content="{:fieldname='keywords'/}"> < ...