css下拉导航栏代码
2024-10-15 20:25:25
<!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>
最新文章
- 由select * from table where 1=1中的1=1说开数据库
- OSIC Performance Bot
- 2015CCPC小记
- 一行能装逼的JavaScript代码
- webview渲染流程
- Android Widget 小部件(三) 在Activity中加入Widget
- Trace、Debug和TraceSource的使用以及日志设计 .
- 企业用户2T(含秒传),普通用户20G
- 深入mongoDB(1)--mongod的线程模型与网络框架
- <;meta name=";viewport"; content=";width=device-width, initial-scale=1"; />;
- Android 进程和文件的UID/GID
- JavaScript中的分号插入机制
- ZooKeeper 单机版安装和配置
- CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-总目录
- 使用ZeroBrane Studio调试Openresty lua脚本
- JavaEE XML的读写(利用JDom对XML文件进行读写)
- 以太坊钱包开发系列4 - 发送Token(代币)
- 【Java入门提高篇】Day4 Java中的回调
- mysql查找有某列但没有此列索引的表
- 如何使用 adb 命令实现自动化测试