div+css 设计下拉
css样式
<style type="text/css">
<!--
/* www.divcss5.com CSS下拉菜单实例 */
* {
margin:;
padding:;
border:;
} body {
font-family: arial, 宋体, serif;
font-size: 12px;
} #nav {
line-height: 24px;
list-style-type: none;
background: #666;
} #nav a {
display: block;
width: 150px;
text-align: center;
} #nav a:link {
color: #666;
text-decoration: none;
} #nav a:visited {
color: #666;
text-decoration: none;
} #nav a:hover {
color: #FFF;
text-decoration: none;
font-weight: bold;
} #nav li {
float: left;
width: 150px;
background: #CCC;
} #nav li a:hover {
background: #999;
} #nav li ul {
line-height: 27px;
list-style-type: none;
text-align: left;
left: -999em;
width: 150px;
position: absolute;
} #nav li ul li {
height: 30px;
line-height: 30px;
float: left;
width: 150px;
background: #EFEFEF;
} #nav li ul a {
display: block;
width: 126px;
text-align: left;
padding-left: 24px;
overflow: hidden;
} #nav li ul a:link {
color: #666;
text-decoration: none;
} #nav li ul a:visited {
color: #666;
text-decoration: none;
} #nav li ul a:hover {
color: #F3F3F3;
text-decoration: none;
font-weight: normal;
background: #C00;
} #nav li:hover ul {
left: auto;
} #nav li.sfhover ul {
left: auto;
} #content {
clear: left;
} </style>
html
<ul id="nav">
<li>
<a href="#" id="colorShow" style="height: 30px; line-height: 30px">卡券颜色</a>
<ul id="colorList" runat="server">
<li><a href="#" style="background-color: red" onclick="saveColorID('red')">ff</a></li>
<li><a href="#" style="background-color: black" onclick="saveColorID('black')">ff</a></li>
<li><a href="#" style="background-color: blue" onclick="saveColorID('blue')">ff</a></li>
<li><a href="#" style="background-color: white" onclick="saveColorID('white')">ff</a></li>
<li><a href="#" style="background-color: green" onclick="saveColorID('green')">ff</a></li>
<li><a href="#" style="background-color: gray" onclick="saveColorID('gray')">ff</a></li>
</ul>
</li>
</ul>
div+css 设计下拉的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- CSS的下拉菜单被挡住,修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 纯洁CSS实现下拉菜单和下拉容器(纯洁CSS导航栏和导航下拉容器)
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- JS Div滚动,下拉框添加属性,年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- div模拟的下拉框特效
随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...
随机推荐
- C#基础知识记录一
C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...
- 【转载】APP留存率多少才合格——全面解析留存率
做产品经理的一般都会关注以下 提高用户留存率 提高用户粘性和活跃度 这些天,有几位朋友都找我聊产品的留存率,有做手游的,做工具的,做社交APP的,于是把以前写过的留存率文章翻出来. 次日留 ...
- ios - kvo观察者示例
首先创建Person分类 #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatom ...
- C#操作Mongodb的心得
Mongodb是一个强大的文档型数据库,采用BSON的数据格式.本文主要采用其官方的C#驱动来操作其表中的集合.驱动版本为1.1.0,下载地址为: http://mongodb.github.io/m ...
- Leetcode: Serialize and Deserialize BST
Serialization is the process of converting a data structure or object into a sequence of bits so tha ...
- jdbc 数据的增删改查的Statement Resultset PreparedStatement
完成数据库的连接,就马上要对数据库进行增删改查操作了:先来了解一下Statement 通过JDBC插入数据 (这里提供一个查找和插入方法) Statement:用于执行sql语句的对象: *1.通过C ...
- Android 自定义 view(四)—— onMeasure 方法理解
前言: 前面我们已经学过<Android 自定义 view(三)-- onDraw 方法理解>,那么接下我们还需要继续去理解自定义view里面的onMeasure 方法 推荐文章: htt ...
- linux系统无法启动解决方案
windows和linux双系统一般先安装Windows,分两个主分区,把Linux安装在另外的主分区上.Linux编译内核,添加NTFS分区支持,然后Mount NTFS 分区即可访问Windows ...
- ubuntu command
uninstall software: sudo apt-get purge openjdk*
- paper 117:image matting 数字抠图
很多公式和图传起来比较麻烦,其实这是一篇论文(仅参考) 图像和视频抠图(Matting)技术可以分成自动和半自动:根据背景的先验知识,又有蓝屏背景,已知背景,和自然背景扣图.报告介绍了自然背景下的半自 ...