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 ...
随机推荐
- LeetCode Minimum Moves to Equal Array Elements
原题链接在这里:https://leetcode.com/problems/minimum-moves-to-equal-array-elements/ 题目: Given a non-empty i ...
- Java提高篇——Java 异常处理
异常的概念 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误java.lang.Error:如果你用Syst ...
- 制作自己的嵌入式Linux电脑_转
制作自己的嵌入式Linux电脑 http://os.51cto.com/art/201409/450334.htm 原文链接:http://blog.jobbole.com/75414/ 包含器件选择 ...
- maven exclusion 解决maven传递依赖中的版本冲突
传递依赖是maven最有特色的.最为方便的优点之一,可以省了很多配置.如a 依赖 b,b 依赖c 默认 a也会依赖 c.但是也会带来隐患,如版本冲突.当然maven也考虑到解决办法,可以使用exclu ...
- iOS - NSString去掉回车与换行符
代码展示: 由于服务器返回的字符串有回车与/n自己设置的xib的label显示装不下了,所以初次下策也没通知服务端自己改一下吧. NSString *str = fault.fault_content ...
- 如何创建一个简单的C++同步锁框架(译)
翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...
- Leetcode: Serialize and Deserialize BST
Serialization is the process of converting a data structure or object into a sequence of bits so tha ...
- JS新API标准 地理定位(navigator.geolocation)/////////zzzzzzzzzzz
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- PHP+ExtJS 文件上传示例
xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...
- vs2013 括号自动配对样式设置
在做公司一个项目的时候,需要用到VS2013编辑器,用了之后感觉有点不太爽. 在js文件里定义了方法之后,由于方法比较长,写完之后再回来看就有些不方便,尤其是方法里还有几个判断,后人再看的时候会有些 ...