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 ...
随机推荐
- css3知识
一.box-sizing 属性 规定两个并排的带边框的框 二.align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 值: flex-start:弹性盒子 ...
- Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例
弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- AFN和ASI区别
AFN和ASI区别 一.AFN和ASI的区别 1.底层实现1> AFN的底层基于OC的NSURLConnection和NSURLSession2> ASI的底层基于纯C语言的CFNetwo ...
- Python之路-python(堡垒机)
运维堡垒机开发 前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的 ...
- VC工程中文件的编译顺序
用联合编译工具能减少大量编译时间,然而如果工程里有个大型cpp文件,其他文件都编译好了只等着它... 两步解决问题: 1.将大文件分散到多个小cpp里面,加快并发,减少单个文件编译时间 2.优先编译大 ...
- ora-02292
select table_name from all_constraints where constraint_name = '约束的名称'
- 浅谈HTTPS和SSL/TLS协议的背景和基础
相关背景知识要说清楚HTTPS协议的实现原理,至少要需要如下几个背景知识.大致了解几个基础术语(HTTPS.SSL.TLS)的含义大致了解HTTP和TCP的关系(尤其是"短连接"和 ...
- css2 [lang|=en] 误区
[lang|=en] w3c说明:css2选择器,选择以en开头的的lang属性. w3c的这个解释是有误区的,en开头,但是en后面必须要有-,也就是说是选择的是en-开头
- 佳能6d 魔灯
注意:由于魔灯团队因为开发理念的原因分成了魔灯和悲剧灯两个团队,新用户推荐直接刷魔灯的最新固件,请拉到顶楼最下方参考安装方法! 以下内容为历史版本的安装方法,为悲剧灯(原魔灯)团队开发! 百度网盘下载 ...