Css下拉菜单设置
<style type="text/css">
*{margin:0px;padding:0px;}设置所有标签属性《初始化页面属性》
#nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}
ui{list-style:none;} 去掉ul的默认样式
ui li{
float:left;左浮动
line-height:40px;垂直居中
text-align:center;水平居中
position:relative;//相对定位
}
a标签是行内元素
a{
text-decoration:none;取消下划线
color:#000;
display:block;变成块元素
width:90px;
padding:0 10px;自动适应
}
a:hover{
color:#fff;
background-color:#666;
}
ul li ul li{
float:none;//去掉浮动
border-left:none;
margin-top:2px;
background-color#eee;
}
ui li ul{
width:90px;
position:absolute;//绝对定位要配合top letf使用以浏览器来定位
left:0px;top:40px;
display:none;//隐藏
}
ul li :hover ul{display:block;//显示
}
</style>
<div id="nav">
<ul>
<li>首页</li>
<li>课程大厅
<ul>
<li>二级菜单</li>
</ul>
</li>
<li>学习中心</li>
<li>经典案例</li>
</ul>
<div>
<!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>
<style type="text/css">
*{ margin:0px; padding:0px;}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ line-height:40px; text-align:center; position:relative; float:left; }
a{ text-decoration:none; color:#000; display:block; width:90px;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{ float:none;margin-top:2px; background-color:#eee; }
ul li ul{width:90px; position:absolute; display:none; }
ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<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>
</ul>
</div>
</body>
</html>
Css下拉菜单设置的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- CSS:CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- 纯css下拉菜单的制作
通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...
- 【BIEE】BI Publisher下拉菜单设置
在使用BIEE的过程中,通常会有需要根据下拉菜单所选内容进行数据展示,如下图所示: 设置参数 进入数据模型编辑界面→参数 新增参数,P_DATADATE为示例参数 参数赋值 同时点击"值列表 ...
- 简易的CSS下拉菜单 - 1
<!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...
- [CSS]下拉菜单
原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用
随机推荐
- JavaScript--元素对象方法setAttribute() 和appendChild()
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点 setAttribute() 方法创建或改变某个新属性.如果指定属性已经存在,则只设置该值 <!DOCTYPE html ...
- this上下文一致
什么是this对象 先来说说什么是this对象吧,每个函数在调用的时候都会自动获取两个特殊变量:this和arguments对象.this值具体是指哪个对象是和该函数的执行环境相关的.如果是作为对象的 ...
- python 类似java的三目运算符
python中没有其他语言中的三元表达式,不过有类似的实现方法 其他语言中,例如java的三元表达式是这样 int a = 1; String b = ""; b = a > ...
- 设计模式之Composite(组合)(转)
Composite定义: 将对象以树形结构组织起来,以达成"部分-整体" 的层次结构,使得客户端对单个对象和组合对象的使用具有一致性. Composite比较容易理解,想到Comp ...
- HADOOP nutch java mysql
下载Hadoop安装包 wget http://apache.fayea.com/hadoop/common/hadoop-2.7.2/hadoop-2.7.2.tar.gz java安装 wg ...
- js多个异步请求
一,两个(或多个)js异步并发执行,怎么在两个AJax异步操作之后执行一个新的操作 原题来自 ES6 方法 1.Promise 包装异步ajax操作,2.定义async 函数,3.用await等待pr ...
- 前端框架VUE----指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- Java中高级面试必问之多线程TOP50(含答案)
以下为大家整理了今年一线大厂面试被问频率较高的多线程面试题,由于本人的见识局限性,所以可能不是很全面,也欢迎大家在后面留言补充,谢谢. 1.什么是线程? 2.什么是线程安全和线程不安全? 3.什么是自 ...
- 使用Holer远程桌面登录家里电脑和公司内网电脑
1. Holer工具简介 Holer exposes local servers behind NATs and firewalls to the public internet over secur ...
- php打乱数组二维数组、多维数组
//这个是针对二维数组的!下面针对多维数组的乱序方法<?php function shuffle_assoc($list) { if (!is_array($list)) return $lis ...