css下拉导航栏代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--<link href="test3.css" rel="stylesheet" type="text/css"/>-->
<style type="text/css">
* {
margin: 0px;
padding: 0px
}
section {
background: #;
color: #E9E9E9
}
a {
text-decoration: none;
color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
nav {
width: 400px;
height: 60px;
margin: auto;
color: #;
}
ul, li {
list-style-type: none
}
nav>ul >li {
float: left;
position: relative;
}
nav>ul >li >a {
display: block;
padding: 20px 0px;
width: 80px;
text-align: center;
border-right: 1px solid #e9e9e9;
}
.subnav {
display: none;
}
nav>ul>li:hover {
background: #12aeef;
}
nav>ul>li:hover .subnav {
display: block;
position: absolute;
margin-top: 1px
}
.subnav a {
display: block;
background-color: #12aeef;
color: #FFFFFF;
border-bottom: 1px solid #f2f2f2;
width: 100px;
text-align: center;
}
.subnav a:hover {
background: #6dc7ec;
}
</style>
</head> <body>
<header>
<nav>
<ul>
<li><a href="#">Home</a>
<ul class="subnav">
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul class="subnav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<section>
<article>
<div> Nav test </div>
</article>
</section>
</body>
</html>
css下拉导航栏代码的更多相关文章
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 低版本系统兼容的ActionBar(三)自定义Item视图+进度条的实现+下拉导航+透明ActionBar
一.自定义MenuItem的视图 custom_view.xml (就是一个单选按钮) <?xml version="1.0" encoding="u ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
随机推荐
- [转][PowerShell]ps执行重启IIS
来自:https://www.aliyun.com/jiaocheng/871477.html write-output 'Restarting IIS servers ............... ...
- 廖雪峰Java4反射与泛型-1反射-4调用构造方法
1.Class.newInstance()只能调用public的无参数构造方法 public class Main { public static void main(String[] args) t ...
- int, bool, string的操作
基本数据类型 1.int型 可以求整数的二进制长度.输入一个数字a,"a.bit_length()"语法求a的二进制长度. a = 3 #二进制为11 print(a.bit_le ...
- 您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用
问题发生在CRM 4.0 上 1 用户所在办事处及办事处上级被禁用. 2 如果已经重新启用了,还是报这个错误. 可以把停用的办事处及相关下级再重新--停用--启用一次试试. 3 如果还是报错,查看是否 ...
- Linux后台有个systemd-r进程,占用5355等端口
编辑配置文件 vim /etc/systemd/resolved.conf 设置LLMNR=0 重启服务: systemctl restart systemd-resolved.service
- What Your Computer Does While You Wait.CPU的等待有多久?
原文标题:What Your Computer Does While You Wait 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高 ...
- fiddler--配置火狐代理配置代理
fiddler安装 下载fiddler最新版: 默认安装: 配置火狐代理配置代理 打开fiddler 按图操作,复制选中的链接:fiddler -> tool ->connections ...
- Docker使用札记 - 常用命令
1. 删除untagged的镜像(TAG列为<none>) docker images -f "dangling=true" -q|xargs docker rmi
- 图算法之——dijkstra算法
一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...
- Linux的用户
添加用户 添加删除用户 # useradd user # passwd user Changing password for user user. New password: BAD PASSWORD ...